一起搞懂 CSS 水平居中與垂直居中的16個方法
摘要：
.parent {
text-align: center;
}
複製程式碼
1.2 塊級元素
1.2.1 塊級元素一般居中方法
.son {
margin: 0 auto;
}
複製程式碼
1.2.2 子元素含 float
.parent{
widt...
.parent {
text-align: center;
}
複製程式碼
1.2 塊級元素
1.2.1 塊級元素一般居中方法
.son {
margin: 0 auto;
}
複製程式碼
1.2.2 子元素含 float
.parent{
width:fit-content;
margin:0 auto;
}
.son {
float: left;
}
複製程式碼
1.2.3 Flex 彈性盒子
1） flex 2012版
.son {
display: flex;
justify-content: center;
}
複製程式碼
2）flex 2009版
.parent {
display: box;
box-orient: horizontal;
box-pack: center;
}
複製程式碼
1.2.4 絕對定位
1）transform
.son {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
複製程式碼
2）left: 50%
.son {
postion: absolute;
width: 寬度;
left: 50%;
margin-left: -0.5*寬度
}
複製程式碼
3）left/right: 0
.son {
position: absolute;
width: 寬度;
left: 0;
right: 0;
margin: 0 auto;
}
複製程式碼
小結
以上是 CSS 水平居中的 8 種方法。
二、垂直居中
2.1 行內元素
.parent {
height: 高度;
}
.son {
line-height: 高度;
}
複製程式碼
注：① 子元素 line-height 值為父元素 height 值。② 單行文字。
2.2 塊級元素
2.2.1 行內塊級元素
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
複製程式碼
適應 IE7。
2.2.2 table
.parent {
display: table;
}
.son {
display: table-cell;
vertical-align: middle;
}
複製程式碼
優點
- 元素高度可以動態改變, 不需再CSS中定義, 如果父元素沒有足夠空間時, 該元素內容也不會被截斷。
缺點
- IE6~7, 甚至IE8 beta中無效。
2.2.3 Flex 彈性盒子
1）flex 2012版
.parent {
display: flex;
align-items: center;
}
複製程式碼
優點
- 內容塊的寬高任意, 優雅的溢位。
- 可用於更復雜高階的佈局技術中。
缺點
- IE8/IE9不支援。
- 需要瀏覽器廠商字首。
- 渲染上可能會有一些問題。
2）flex 2009版
.parent {
display: box;
box-orien: vertical;
box-pack: center;
}
複製程式碼
優點
- 實現簡單, 擴充套件性強。
缺點
- 相容性差, 不支援IE。
2.2.4 絕對定位
1）transform
.son {
position: absolute;
top: 50%;
transform: translate( 0, -50%);
}
複製程式碼
優點
- 程式碼少。
缺點
- IE8不支援, 屬性需要追加瀏覽器廠商字首, 可能干擾其他 transform 效果, 某些情形下會出現文字或元素邊界渲染模糊的現象。
2）top: 50%
.son {
position: absolute;
top: 50%;
height: 高度;
margin-top: -0.5高度;
}
複製程式碼
優點
- 適用於所有瀏覽器。
缺點
- 父元素空間不夠時, 子元素可能不可見(當瀏覽器視窗縮小時,滾動條不出現時).如果子元素設定了overflow:auto, 則高度不夠時, 會出現滾動條。
3）top/bottom: 0;
.son {
position: absolute;
top: 0;
botton: 0;
margin: auto 0;
}
複製程式碼
優點
- 簡單。
缺點
- 沒有足夠空間時, 子元素會被截斷, 但不會有滾動條。
以上總結了水平居中、垂直居中各8個共16種方法。