CSS 8種常見的CSS水平和垂直都居中的方法

2021-10-03 20:16:54 字數 2056 閱讀 9528

特點:父容器要設定寬高,需要知道子容器寬高,偏移量是子容器寬高的一半且是負值,相容性好

/* absolute+margin負值偏移布局 */

.layout.absolute

.layout.absolute article

1.absolute+margin負值偏移

(父容器要設定寬高,需要知道子容器寬高)

特點:父容器要設定寬高

/* absolute+transform布局 */

.layout.transform

.layout.transform article

2.absolute+transform

(父容器要設定寬高)

特點:自適應

/* flex布局 */

.layout.flex

3.flex

(自適應)

特點:比其他方法多1個容器,注意邊距重疊

.layout.table-cell 

.layout.table-cell .outer

.layout.table-cell article

4.table-cell

(多1個容器,注意邊距重疊)

特點:自適應,要考慮相容性

.layout.grid

.layout.grid article

5.grid

(自適應,要考慮相容性)

特點:自適應,相容性好

.layout.inline-block 

.layout.inline-block::after

.layout.inline-block article

6.inline-block

(自適應)

特點:內外容器都要設定寬高,相容性好

.layout.margin-auto 

.layout.margin-auto article

7.absolute + margin-auto

(內外容器都要設定寬高)

特點:只適合單行inline,而且要知道父容器的高度,相容性好

.layout.line-height 

.layout.line-height article

8.line-height(只適合單行inline,而且要知道父容器的高度)

1.absolute+margin負值偏移

(父容器要設定寬高,需要知道子容器寬高)

2.absolute+transform

(父容器要設定寬高)

3.flex

(自適應)

4.table-cell

(多1個容器,注意邊距重疊)

5.grid

(自適應,要考慮相容性)

6.inline-block

(自適應)

7.absolute + margin-auto

(內外容器都要設定寬高)

8.line-height(只適合單行inline,而且要知道父容器的高度)

CSS 8種清除浮動的方法

今天做了個網頁,發現在浮動方面還沒完全掌握,經過向同學請教和思考後,發現這個很有必要進行總結下。在用div css布局時通常都會用到浮動 float 來完成頁面布局,浮動 float 會使當前標籤產生向上浮的效果,同時會影響到前後標籤 父級標籤的位置及 width height 屬性。如果在布局中使...

CSS8種垂直居中方式

1.通過vertical align middle實現垂直居中 son son 3.通過偽元素 before 實現垂直居中 father father before son 4.通過dispaly table cell實現css垂直居中 father son 5.通過隱藏節點實現css垂直居中 hi...

css中的居中(水平和垂直)

text align center 水平居中,寫在父類元素中,作用於子類行內元素,讓其在父類元素中水平居中,如果子類元素是塊元素,也想水平居中,可加display inline block vertical align center 這個樣式屬性只能寫在讓子類行內元素中,父類也要是行內元素,作用就是...