Web前端培訓：CSS如何實現元素水平垂直都居中?

我們在平時訪問一些頁面的時候,會發(fā)現有些內容總是顯示在整個頁面的中間,比如百度登錄頁面,小米協(xié)議聲明：

要解決子元素在父元素中水平垂直都居中，可以分3步

1. 定義HTML結構,一個父盒子包裹一個子盒子

2. 通過CSS的絕對定位屬性實現水平垂直都居中

3. 通過CSS的flex屬性實現水平垂直都居中

一. 第一步 —— 定義HTML結構,一個父盒子包裹一個子盒子

目標 : 書寫HTML結構,一個父盒子包裹一個子盒子,并給父盒子子盒子一定的寬度高度,以及不同的背景顏色

小結 : 大盒子包住小盒子,注意標簽對不要交錯,以及class的屬性名一定要類選擇器保持一致

二. 第二步 —— 通過CSS的絕對定位屬性實現水平垂直都居中

目標 : 父盒子相對定位,子盒子絕對定位,設置left,top偏移量,使子盒子在父盒子中水平垂直都居中

1. 絕對定位方式配合margin外邊距屬性實現

所以,我們還需要使用margin負邊距,讓子元素居中,水平方向負子元素寬度的一半,垂直方向負子元素高度的一半

2. 上述方法,如果子元素的寬度高度改變的話,margin-left與margin-top也需要跟著改變才能保證居中,但是我們可以使用CSS3中的transform:translate平移屬性實現

小結 : 使用絕對定位屬性position:absolute;設置left,top偏移量,配合margin或者transform屬性實現子盒子居中顯示

三. 第三步 —— 通過CSS的flex屬性實現水平垂直都居中

目標 : 通過css的彈性盒子flex的align-items,justify-content實現子元素水平垂直都居中

另外,可以通過 http://www.runoob.com/css3/css3-flexbox.html 快速學習彈性盒子布局

小結 : 需要給父盒子設置display:flex;align-items:center;justify-content:center;

總結

實現元素水平垂直都居中步驟如下:

1. 書寫HTML結構,一個父盒子包裹一個子盒子,并給父盒子與子盒子一定的寬度高度,以及不同的背景顏色

2. 父盒子相對定位,子盒子絕對定位,設置left,top偏移量,使子盒子在父盒子中水平垂直都居中,但是還需要配合margin屬性或者transform:translate屬性

3. 還可以使用彈性flex布局實現,在父盒子中

      /*定義為彈性布局*/
display: flex;
/*垂直居中*/
align-items: center;
/*水平居中*/
justify-content: center;