CSS水平和垂直居中

2021-09-14 05:05:34 字數 1219 閱讀 8371

.parent
.son
.parent


.son
.parent
1）transform(絕對定位，left50%,向左平移-50%)

.son
2)  margin-left(絕對定位，left50%,margin-left:-0.5*子元素寬度)** 注：此方法必須知道子元素寬度**

.son
3）left/right: 0

.son
.parent


.son
注：① 子元素 line-height 值為父元素 height 值。② 單行文字

.parent::after


.son
.parent


.son
注：ie 6-8不相容

.parent
優點: 1、內容塊的寬高任意, 優雅的溢位。2、可用於更複雜高階的布局技術中。

缺點：1、ie8/ie9不支援。2、需要瀏覽器廠商字首。3、渲染上可能會有一些問題。

1）transform

.parent


.son
缺點：ie8不支援, 屬性需要追加瀏覽器廠商字首, 可能干擾其他 transform 效果, 某些情形下會出現文字或元素邊界渲染模糊的現象。

2） margin-top: -0.5*高度

.parent


.son
缺點：父元素空間不夠時, 子元素可能不可見(當瀏覽器視窗縮小時,滾動條不出現時).如果子元素設定了overflow:auto, 則高度不夠時, 會

出現滾動條。

3）top/bottom: 0;

.parent


.son
缺點:沒有足夠空間時, 子元素會被截斷, 但不會有滾動條。

參考原文:

CSS詳解水平和垂直居中

text align center margin 0 auto 設定父元素flex布局 display flex justify content center 1.子元素使用相同內邊距撐開父元素 padding top 30px padding bottom 30px 2.使高度和行高相等 字元本來...

css中的居中（水平和垂直）

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

CSS水平和垂直居中技術

行內元素的水平居中 text align center 在父元素中設定 塊級元素的水平居中 margin 0 auto 行內元素的垂直居中 line height 父元素的高度 在父元素中設定 vertical align middle 用於垂直對齊inline元素 例如將乙個icon與文字對齊。浮...