作為乙個來自逆戰班的前端「小學生」，今天給大家講解下我對flex布局水平垂直居中的理解。首先，我們需要了解什麼是flex布局，flex布局通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。
flex布局決定主軸方向上子項的對齊和分布方式的屬性是： justify-content
它可以設定的屬性值包括：
flex-start ： 子項都去起始位置對齊。
flex-end ： 子項都去結束位置對齊。
center ： 子項都去中心位置對齊。
space-between : 表現為兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配。
space-around : around是環繞的意思，意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半。
space-evenly : evenly是勻稱、平等的意思。也就是視覺上，每個flex子項兩側空白間距完全相等。
flex布局決定每一行中的子元素上下對齊方式的屬性是：align-items
它的屬性值包括：
flex-start;子項都去上端對齊。
center;子項都去上下的中間對齊。
flex-end;子項都去下端對齊。
在flex布局中，可以通過給父元素新增樣式，來實現水平垂直居中
水平居中：
效果圖：
垂直居中：
效果圖：
水平垂直居中：
效果圖：
居中布局之水平垂直布局
命題 如下不定寬高的父元素與子元素 div class parent div class child demo div div 問題一 使子元素水平居中 方案1 child進行相容 parent 優點 瀏覽器相容性好 缺點 子元素會繼承文字居中特性，故如不希望子元素中文字居中，可對子元素設定 方案2...
CSS布局 水平垂直居中
題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...
CSS 布局 水平垂直居中
原理 首先利用 absolute 定位把容器塊左頂角對準瀏覽器中心，然後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。優點 相容性好 缺點 需要知道寬高，不夠靈活 container原理 首先利用 absolute 定位把容器塊...