首頁技術文章正文

CSS各種居中方式筆記總結

更新時間:2018-07-25 來源:黑馬程序員 瀏覽量:

1 水平居中

1.1 內聯(lián)元素水平居中

利用 text-align: center 可以實現(xiàn)在塊級元素內部的內聯(lián)元素水平居中。

此方法對內聯(lián)元素(inline), 內聯(lián)塊(inline-block), 內聯(lián)表(inline-table), inline-flex元素水平居中都有效。

html代碼:
1532488524056_32.png
css代碼:
1532488531509_33.png

1.2 塊級元素水平居中

通過把固定寬度塊級元素的margin-left和margin-right設成auto,就可以使塊級元素水平居中。

html代碼:

1553760716450_1532487362077014827.png1.3 多塊級元素水平居中
1.3.1 利用inline-block

如果一行中有兩個或兩個以上的塊級元素,通過設置塊級元素的顯示類型為inline-block和父容器的text-align屬性從而使多塊級元素水平居中。

html代碼:

1532488983074_51.png

1.3.2 利用display: flex

利用彈性布局(flex),實現(xiàn)水平居中,其中justify-content 用于設置彈性盒子元素在主軸(橫軸)方向上的對齊方式,本例中設置子元素水平居中顯示。

html代碼:

1532488564915_35.png
2 垂直居中

2.1 單行內聯(lián)(inline-)元素垂直居中

通過設置內聯(lián)元素的高度(height)和行高(line-height)相等,從而使元素垂直居中。

html代碼:


1532489051809_52.png

2.2 多行元素垂直居中


2.2.1 利用表布局(table)

利用表布局的vertical-align: middle可以實現(xiàn)子元素的垂直居中。

html代碼:

1532488583603_37.png
2.2.2 利用flex布局(flex)

利用flex布局實現(xiàn)垂直居中,其中flex-direction: column定義主軸方向為縱向。因為flex布局是CSS3中定義,在較老的瀏覽器存在兼容性問題。

html代碼:

1532488595634_38.png

2.2.3 利用“精靈元素”

利用“精靈元素”(ghost element)技術實現(xiàn)垂直居中,即在父容器內放一個100%高度的偽元素,讓文本和偽元素垂直對齊,從而達到垂直居中的目的。

html代碼:
1532488612900_39.png
2.3 塊級元素垂直居中


2.3.1 固定高度的塊級元素

我們知道居中元素的高度和寬度,垂直居中問題就很簡單。通過絕對定位元素距離頂部50%,并設置margin-top向上偏移元素高度的一半,就可以實現(xiàn)垂直居中了。

html代碼:


1532488848698_41.png

2.3.2 未知高度的塊級元素

當垂直居中的元素的高度和寬度未知時,我們可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現(xiàn)垂直居中。但是部分瀏覽器存在兼容性的問題。

HTML代碼:


1532488806042_42.png3 水平垂直居中

3.1 固定寬高元素水平垂直居中

通過margin平移元素整體寬度的一半,使元素水平垂直居中。

HTML代碼:


1532488784932_43.png
3.2 未知寬高元素水平垂直居中

利用2D變換,在水平和垂直兩個方向都向反向平移寬高的一半,從而使元素水平垂直居中。

HTML代碼:

1532488769104_44.png

3.3 利用flex布局

利用flex布局,其中justify-content 用于設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式;而align-items屬性定義flex子項在flex容器的當前行的側軸(縱軸)方向上的對齊方式。

HTML代碼:

1532488751667_45.png3.4 利用grid布局

利用grid實現(xiàn)水平垂直居中,兼容性較差,不推薦。

HTML代碼:


1532488736010_46.png3.5 屏幕上水平垂直居中

屏幕上水平垂直居中十分常用,常規(guī)的登錄及注冊頁面都需要用到。要保證較好的兼容性,還需要用到表布局。

html代碼:
1532488727573_47.png

1532488719494_48.png

作者:黑馬程序員前端與移動開發(fā)培訓學院
首發(fā):http://web.itheima.com/

分享到:
在線咨詢 我要報名
和我們在線交談!