CSS佈局：元素垂直居中
CSS佈局之元素垂直居中
本文將依次介紹在不同條件下實現垂直居中的多種方法及簡單原理
Tip：下文中說的適用場景只是舉了幾個簡單的例子方便讀者理解。實際應用場景太複雜，生搬硬套容易出錯。最重要的是掌握各種方法能夠實現居中的原理。只要掌握了原理，那麼不管問題怎麼變都可以根據自己的理解選擇合適的方法。
一、使用line-height
1.原理
有行高的元素，內容會預設顯示在行高的垂直中心處，通過設定行高等於父元素的高度，可以達到內容在父元素中垂直居中的效果
2.實現步驟
（1）父元素有一個確定的高度
（2）在父元素或在子元素中設定line-height等於父元素的高度
3.適用場景
（1）具有行高屬性的單行元素
Tip：若元素有多行，line-height用同樣的原理也可實現，不過需要根據行數計算且容易出錯（若父元素寬度變化影響行數，那麼就要重新計算佈局），這裡不推薦使用line-height設定多行居中。
4.完整程式碼展示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>單行元素垂直居中</title> <style> #box { height: 120px; line-height: 120px; /*設定成和父元素同高，對子元素父元素設定都有效*/ border: 2px solid #222222; } </style> </head> <body> <div id="box"> <span>單行元素垂直居中</span> </div> </body> </html>
二、利用 table-cell 佈局
1.原理
將子元素轉為表格中單元格的形式，使用表格屬性vertical-align實現居中
2.實現步驟
（1）父元素轉換為表格型別display:table;
（2）子元素轉換為表格單元格型別display:table-cell;
（3）子元素使用單元格居中屬性vertical-align:middle;
3.適用場景
（1）未知高度單行元素垂直居中
（2）未知高度多行元素垂直居中
（3）未知高度的塊級元素
4.完整程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多行元素垂直居中</title> <style> #box { display: table;/*轉換為表格元素*/ height: 140px; border: 2px solid #222222; } span { display: table-cell;/*轉換為為table-cell單元格元素*/ vertical-align: middle;/*設定垂直居中對齊*/ } </style> </head> <body> <div id="box"> <span>多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中多行元素垂直居中 </span> </div> </body> </html>
三、利用相對定位relative和絕對定位absolute
1.原理
使用定位將元素移動到所需要的位置上，將元素定位到垂直居中的位置就實現了居中
Tip：注意元素定位是以元素的某個邊或者某個角作為參考，而不是以元素的中心點為參考
例：單個使用，是以邊框為參考，兩個組合使用是以角為參考點
（1）top：以元素上邊框為參考，top：50px；就是元素上邊框距離父元素上邊框50px
（2）right：以元素右邊框為參考，right：50px；就是元素右邊框距離父元素右邊框50px
（3）left和top組合使用：以元素的左上角的點為參考，top：50px；left：50px；表示元素左上角的點距離父元素上邊框50px，距離父元素左邊框50px；
（4）right和bottom組合使用：以元素的右下角的點為參考，bottom：50px；right：50px；表示元素右下角的點距離父元素下邊框50px，距離父元素右邊框50px；
（5）其他各種組合同理，兩個對立方向的屬性不能同時組合使用。例如top和bottom同時使用以top為準，bottom會失效。left和right；同時使用的話會以left為準right會失效。
2.步驟
（1）先將父元素設定為相對定位relative
（2）將子元素設定為絕對定位absolute（子絕父相）
（3）向下移動子元素，移動距離為父容器高度的一半（50%）
（4）通過向上移動子元素的一半寬度（具體px值）以達到垂直居中。（通過margin實現）
3.適用場景
（1）已知高度的塊級元素垂直居中
4.完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>已知高度的塊級元素垂直居中</title>
<style>
#box {
position: relative;
height: 200px;
border: 2px solid #222222;
}
.child {
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 50%;
/*設定塊級元素上邊框距離頂部50%，使元素上邊框這條線垂直居中於父元素*/
margin-top: -50px;
/*設定元素上邊框向上移動元素高度的一半，使元素整體垂直居中*/
}
</style>
</head>
<body>
<div id="box">
<div class="child"></div>
</div>
</body>
</html>
四、使用彈性盒子flex佈局
方法一：align-items屬性
1.原理
利用佈局神器彈性盒子的align-items屬性進行側軸方向佈局。彈性盒子預設主軸是左右方向，側軸是上下方向，設定側軸上下方向居中。即可達到使子元素垂直居中的效果。
2.實現步驟
（1）父元素開啟彈性盒子display:flex;
（2）父元素設定align-items:center;（側軸方向居中對齊）
3.適用場景
（1）未知高度的元素垂直居中
（2）已知高度的元素垂直居中
（3）浮動元素的垂直居中
4.完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>未知高度元素垂直居中</title>
<style>
#box {
display: flex;/*開啟彈性盒子*/
align-items: center;/*設定側軸方向居中*/
border: 1px solid #222222;
height: 100px;
}
.child{
float: left;/*浮動的元素同樣可以居中*/
}
</style>
</head>
<body>
<div id="box">
<div class="child">未知高度的元素垂直居中</div>
</div>
</body>
</html>
方法二：justify-content屬性
1.原理
利用佈局神器彈性盒子的justify-content屬性進行主軸方向佈局。彈性盒子預設主軸是左右方向，側軸是上下方向。所以要先用flex-direction把主軸方向改為上下方向。再設定主軸居中。即可達到使子元素垂直居中的效果。
2.實現步驟
（1）父元素開啟彈性盒子display:flex;
（2）父元素將主軸設定為上下方向flex-direction: column;
（3）父元素設定justify-content: center;（主軸方向居中對齊）
3.適用場景
（1）未知高度的元素垂直居中
（2）已知高度的元素垂直居中
（3）浮動元素的垂直居中
（4）多行元素的垂直居中
4.完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行元素垂直居中</title>
<style>
#box {
height: 140px;
/*需設定高度，不設定的話預設高度為內容撐起的高度，看不出居中效果*/
display: flex;/*開啟彈性盒子佈局*/
flex-direction: column;/*設定主軸縱向排列*/
justify-content: center;/*在主軸方向上居中*/
border: 2px solid #222222;
}
</style>
</head>
<body>
<div id="box">
<span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit quidem laudantium quasi, fugit sapiente,
culpa at voluptatum neque nemo nobis cupiditate assumenda esse aut </span>
</div>
</body>
</html>
Tip：本文所說的原理及內容是我個人的理解，如果有錯誤歡迎指出。