css 水平居中垂直居中水平垂直居中

一、水平居中

1、行內元素水平居中text-align :center

2、塊級元素水平居中margin:0 auto

3、多個塊狀元素的水平居中

實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display:inline-block，然後在父級元素上設定text-align:center，達到與上面的行內元素的水平居中一樣的效果。

二、垂直居中

1、行內或類行內元素垂直居中

對於單行行內或者文字元素，只需為它們新增等值的 padding-top 和 padding-bottom 就可以實現垂直居中；

對於多行文字，同樣可以使用等值 padding-top 和 padding-bottom 的方式實現垂直居中。如果在使用過程中發現這種方法沒見效，那麼可以通過 css 為文字設定乙個類似 table-cell的父級容器，然後使用vertical-align屬性實現垂直居中；

可以使用 flexbox 實現垂直居中，對於父級容器為 display: flex 的元素來說，它的每乙個子元素都是垂直居中的；

2、塊級元素

已知元素的高度

無法獲知元素的具體高度是非常常見的一種狀況，比如：視區寬度變化，會觸發布局重繪，從而改變高度；對文字施加不同的樣式會改變高度；文字的內容量不同會改變高度；當寬度變化時，對於寬高比例固定的元素（比如），也會自動調整高度…… 如果我們知道元素的高度，可以這樣來實現垂直居中：

.parent

.child

未知元素的高度

如果不知道元素的高度，那麼就需要先將元素定位到容器的中心位置，然後使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合，從而實現垂直居中：

.parent

.child

三、水平垂直居中

寬高固定元素

設定父級容器為相對定位的容器，設定子元素絕對定位的位置 position: absolute; top: 50%; left: 50%，最後使用負向 margin 實現水平和垂直居中，margin 的值為寬高（具體的寬高需要根據實際情況計算 padding）的一半。

.parent

.child

寬高不固定元素

如果無法獲取確定的寬高，同樣需要設定父級容器為相對定位的容器，設定子元素絕對定位的位置 position: absolute; top: 50%; left: 50%。不同的是，接下來需要使用 transform: translate(-50%, -50%); 實現垂直居中：

.parent

.child

flexbox

使用 flexbox 實現水平和垂直居中，只需使用兩條居中屬性即可：

.parent

css 水平居中 垂直居中 水平垂直居中