水平 垂直居中

2021-10-03 11:43:14 字數 1194 閱讀 7232

讓塊級元素居中的方法就是設定 margin-left 和 margin-right 為 auto（前提是已經為元素設定了適當的 width 寬度，否則塊級元素的寬度會被拉伸為父級容器的寬度）。常見用法如下所示：

.center-me
請注意，float 屬性是不能實現元素居中的。

設定子元素的高度以及padding-top 和 padding-bottom

div  


div img
法一：仍然使用padding-top 和 padding-bottom （父元素要有確定的高度）

法二: 使用給父元素設定display:table-cell;和vertical-align: middle;屬即可；

#father
你還可以使用 flexbox 實現垂直居中，對於父級容器為 display: flex 的元素來說，它的每乙個子元素都是垂直居中的：（父元素要有確定的高度）

.flex-center-vertically
.parent 


.child
使用定位

.parent 


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

.parent 


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

.parent 


.child
.parent 


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

.parent

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

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...

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

css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...

居中 水平 垂直 水平垂直

將子元素的display設定為inline block，使子元素變成行內元素 這種方法的不足之處在於，子元素的text align繼承了父元素的center，文字也居中顯示，所以需要在子元素中設定text align left 思路二 在本身元素設定margin 0 auto實現塊級元素水平居中 若...