css居中的幾種方式總結

設定塊元素（或與之類似的元素）的居中。

注意：margin:0 auto;的選擇器是作用物件（子元素），如div,p,而不是body。且不受float影響(設定display: block)。

（1）定位和需要定位的元素的margin減去寬高的一半

img

auto設定左右邊距為來使其水平居中。元素會佔據你所指定的寬度，然後剩餘的寬度會一分為二成為左右外邊距

img

transform：translate(-50%，-50%):向上（x軸）向左（y軸）移動自身長寬的50%，使其位於中心。同理，需要按比例移動元素的話修改translate的值就可以做到。

注意：需要居中的元素應為絕對定位（position: absolute;）

img

把其變成**樣式，再利用**的樣式來進行居中，很方便

.box

用了css3新特性flex,非常方便快捷，在移動端使用完美，pc端有相容性問題（只有谷歌和火狐支援）

.container

.main
.left
right

css垂直居中的幾種方式

父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html class container hi,imooc div css container style 說到豎直居中，css 中有乙個用於豎直居中的屬性 vertical al...

css垂直居中的幾種方式

1.對於可以一行處理的 設定 height apx line height apx 2.對於一段文字 會多行顯示的 2.1如果是可以設定乙個固定高度的 父元素使用display table height apx 子元素使用 display table cell vertical align midd...

css水平居中的幾種方式

1.子元素為行內元素時，父元素使用 text align center 實現子元素的水平居中 2.子元素為塊級元素時，2.1.將子元素設定 margin 0 auto 實現居中 2.2.將子元素設定 display inline block，然後可使父元素使用text align center實現居...