CSS居中總結

2021-08-13 03:05:02 字數 1464 閱讀 6721

在父元素上設定
單個元素
這裡利用了table標籤的寬度自適應性，即寬度由文字長度決定。原元素經過轉換後變成了寬度固定的元素。

2.將該元素的display屬性設定為inline，同時在其父元素上設定text-align屬性為center。

.parent


.child
這也很好理解，將元素轉換為行內元素，就可使用行內元素的居中方法。

3.利用float和relative定位，對父元素與子元素的屬性做如下設定。

.parent


.child
首先將父元素水平相對位置右移了50%，即此時父元素的左端處於中心位置。因為子元素鋪滿了父元素，因此子元素左端也處於中心位置。再將子元素的水平相對位置左移50%，此時相當於子元素的中心也已經居中。

多個元素

對於多個元素，無論子元素寬度是否固定，都應該優先考慮flex布局，只用對父元素屬性進行設定，就能實現居中效果。設定**如下

.parent
flex是乙個神器，關於它的更多用法，可參考阮一峰的網路日誌： flex布局教程

以下針對父元素高度確定的情況。

單行文字

對父元素設定使 line-height的值與height值相等。

多行文字

對父元素的屬性做如下設定

.parent
對於多個元素的垂直居中，同理應優先考慮flex布局，以下僅考慮單個元素。

高度固定

對該元素及其父級元素的屬性做如下設定

.parent


.child
高度不固定

對該元素及其父級元素的屬性做如下設定

.parent


.child
按照行內元素水平、垂直居中方法共同設定即可。

寬高固定

對該元素及其父級元素的屬性做如下設定。

.parent


.child
寬高不固定

使用flex布局，做如下設定。

.parent
不同的居中方法適用於不同的場景，以上便是筆者總結掌握的方法，若有錯誤請幫忙指出，感激不盡。

慕課網：水平居中總結-不定寬塊狀元素方法

css-tricks：centering in css: a complete guide

damonare： css居中小談

css 居中總結

1.定寬塊狀元素 水平居中 divstyle 2.不定寬塊狀元素 水平居中 wrap class wrap 設定我所在的div容器水平居中 div 2.display inline textalign center 它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些...

css居中總結

給父元素設定 text align center 但對浮動元素，絕對定位元素無效設定margin 0 auto 將塊級元素display設定為inline，然後使用text align center 給父元素設定float,position relative,left 50 子元素設定positio...

css居中總結

1.我們可以通過給該元素的父級設定margin 0 auto的方式來實現。html class parent class child center div div css child此時檢查元素即可即可實現內層的div實現了居中,這種方式是最為我們熟知的，其缺點是需要設定子元素的寬度。2.通過pos...