CSS佈局：水平垂直居中
CSS佈局：元素水平垂直居中
本文將依次介紹在不同條件下實現水平垂直居中的多種方法
水平垂直居中是在寫網頁時經常會用到的需求，在上兩篇部落格中，分別介紹了水平居中和垂直居中的方法。本文的水平垂直居中就是將之前的水平居中和垂直居中用到的方法綜合起來。用到的原理都是一樣的。相信掌握水平居中和垂直居中的方法後，就能自己總結如何實現水平垂直居中
Tip：下文中說的適用場景只是舉了幾個簡單的例子方便讀者理解。實際應用場景太複雜，生搬硬套容易出錯。最重要的是掌握各種方法能夠實現居中的原理。只要掌握了原理，那麼不管問題怎麼變都可以根據自己的理解選擇合適的方法。
一、使用text-algin和line-height
1.原理
使用text-algin屬性的center值，實現水平居中。
使用line-height屬性，使其的值等於父元素的高度，實現垂直居中
兩者綜合實現水平垂直居中
2.適用場景
（1）通常用於可以設定行高的元素上
3.實現步驟
（1）在父元素上設定文字水平居中
text-algin:center;
（2）在子元素上設定行高等於父元素高度
line-height:100px;
4.完整程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> .box { width: 300px; height: 100px; border: 1px solid #222222; text-align: center;/*設定水平居中*/ } p{ line-height: 100px;/*設定行高等於父元素高度實現垂直居中*/ margin: 0;/*清除外邊距的影響*/ } </style> </head> <body> <div class="box"> <p>水平垂直居中</p> </div> </body> </html>
二、使用table佈局
1.原理
將元素轉為table型別。利用vertical-align屬性進行垂直居中，子元素再使用margin進行水平居中最終實現水平垂直居中（vertical-algin居中需要有參考物，否則不能實現居中。在表單元格中可以直接設定）
2.適用場景
（1）有寬度的子元素
3.實現步驟
（1）父元素將型別轉換為table-cell
display:table-cell;
（2）父元素設定vertical-align實現垂直居中
vertical-align:middle;
（3）子元素設定margin屬性
margin:0 auto;
4.完整程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> * { margin: 0; padding: 0; } .box { width: 300px; height: 100px; border: 1px solid #333; display: table-cell; vertical-align: middle; } .box .child { width: 50px; height: 50px; background: red; margin: 0 auto; } </style> </head> <body> <div class="box"> <div class="child"></div> </div> </body> </html>
三、使用定位
方法一：使用fixed+margin
1.原理
通過設定上下左右的定位屬性，然後設定margin上下左右都為auto實現居中
2.適用場景
（1）未知大小元素在瀏覽器中居中
3.實現步驟
（1）子元素設定固定定位（沒有變化）
position: fixed;（2）子元素設定上下左右的定位值為0（沒有變化）
left: 0;
right: 0;
top: 0;
bottom: 0;
（3）子元素設定margin
margin:auto;
4.完整程式碼
示例1：未知大小的元素在瀏覽器可視視窗中水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>未知大小的元素在瀏覽器可視視窗中水平居中</title>
<style>
img{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/img13.jpg" alt="">
</div>
</body>
</html>
示例2：已知大小的元素在瀏覽器可視視窗中水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>已知大小的元素在瀏覽器可視視窗中水平居中</title>
<style>
.box {
width: 100px;
height: 200px;
background: #f00;
position:fixed;
left: 50%;
top: 50%;
margin: -100px 0 0 -50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
方法二：使用relative + absolute
1.原理
通過父元素設定相對定位，子元素設定絕對定位。利用top值和left值進行居中移動，再使用margin或transform調整位置
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會失效。
（6）所以top和left定位50%，是子元素邊框或某個角移動到50%的位置，還需要移動回來子元素自身一半的長度，達到真正的居中
2.適用場景
（1）已知大小元素在父元素中居中（margin屬性）
（2）未知大小元素在父元素中居中（transform屬性，有相容問題）
（3）浮動元素居中
3.實現步驟
（1）先將父元素設定為相對定位relative（無變化）
position: relative;
（2）將子元素設定為絕對定位absolute（子絕父相）（無變化）
position:absolute;
（3）向右移動子元素，向下移動子元素，移動距離為父容器的一半（50%）
top:50%;
left: 50%;
tip：此時元素的左上角在父元素的中心點
（4）通過向左和向上移動子元素的長度的一半使子元素整體水平居中。
/*margin實現*/
margin: -25px 0 0 -25px;
/*transform實現*/
transform: translate(-50%, -50%);
4.完整程式碼
示例1：已知大小元素在父元素中水平垂直居中（margin屬性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>已知大小元素在父元素中水平垂直居中</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid #333333;
position: relative;
}
.box .child {
width: 50px;
height: 50px;
background: #222222;
position: absolute;
top:50%;
left: 50%;
margin: -25px 0 0 -25px;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
示例2：未知大小元素在父元素中水平垂直居中（transform屬性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 未知大小元素在父元素中水平垂直居中</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid #333333;
position: relative;
}
.box .child {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="child">我是transform居中</div>
</div>
</body>
</html>
四、彈性盒子flex佈局
方法一：justify-content+align-items
1.原理
css3中的彈性盒子是佈局神器，並且可達到某些自適應變化的效果。利用flex佈局，其中justify-content 用於設定或檢索彈性盒子元素在主軸（預設左右橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（預設上下縱軸）方向上的對齊方式。不能相容低版本的IE瀏覽器。
2.適用場景
（1）已知元素大小居中
（2）未知元素大小居中
（3）多個元素同時居中
3.實現步驟
（1）父元素開啟彈性盒子
display:flex;
（2）父元素設定主軸居中（對子元素生效）
justify-content: center;
（3）父元素設定側軸居中（對子元素生效）
align-items: center;
4.完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 未知大小元素在父元素中水平垂直居中</title>
<style>
.box {
height: 100px;
width: 200px;
border: 1px solid #222222;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">
<div class="child">flex居中</div>
</div>
</body>
</html>
方法二：flex/grid 與 margin:auto (最簡單寫法)
1.原理
父元素開啟彈性盒子佈局或者網格佈局，之後子元素利用margin的自動值，實現居中（不能相容低版本的IE瀏覽）
2.適用場景
（1）未知元素大小居中
（2）已知元素大小居中
3.實現步驟
（1）給父元素開啟彈性盒子佈局或者網格佈局
/*開啟彈性盒子佈局*/
display:flex;
/*開啟網格佈局*/
display:gird;
（2）子元素設定margin值實現居中
marign：auto;
4.完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 未知大小元素在父元素中水平垂直居中</title>
<style>
.box {
height: 100px;
width: 200px;
border: 1px solid #222222;
/* display: flex; */
display: grid;
}
.child{
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child">flex或gird居中</div>
</div>
</body>
</html>