前言
被這個問題折磨很久了，一直沒有系統的整理，今天就係統的整理一下比較常用的，以後回顧的時候也可以參照
1. line-height
適用場景：單行文字，下拉框，按鈕等
原理：將單行文字設定行高以後，文字會位於行高的中間位置。也就是需要將元素的 line-height 設定成和高度一樣。
示例如下
<style>
.content{
width: 400px;
background: #ccc;
line-height:100px; /* 垂直居中 */
text-align: center; /* 水平居中 */
}
</style>
<div class="content">我居中了</div>
複製程式碼
2. line-heigh + inline-block
既然單行可以做到垂直居中，那麼多行肯定也是可以的
適用場景：多物件的垂直居中
原理：在要居中的物件外面包裹一層，將它們整個的 display 設定為 inline-block 模仿行內元素。但是包裹物件的內部還是以塊級元素的形式存在。
示例如下
<style>
.main{
width: 400px;
border: 1px solid red;
line-height: 200px;
text-align: center; /* 水平居中 */
}
.wrapper{
line-height: 1;
display: inline-block;
}
</style>
<div class="main">
<div class="wrapper">
<div>我居中了</div>
<div>我也是</div>
</div>
</div>
複製程式碼
3. absolute + margin 負值
這個應該是最常見的居中方式了
適用場景：多行文字的垂直居中，已知寬高
原理：利用絕對定位 top 和 left 50%，然後減去元素本身內容區的一半，就可以實現居中
示例如下
<style>
.main{
border: solid 1px red;
width: 400px;
height: 400px;
position: relative
}
.content{
height: 200px;
width: 200px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
<div class="main">
<div class="content">
</div>
</div>
複製程式碼
4. absolute + margin：auto
適用場景：多行文字垂直居中
原理：這種方法跟上面的有些類似，但是這裡是通過 margin:auto 和 top,left,right,bottom 都設定為 0 實現居中。不過這裡得確定內部元素的高度，可以用百分比，比較適合移動端。
示例如下
<style>
.main{
border: solid 1px red;
width: 400px;
height: 400px;
position: relative;
}
.content{
position: absolute;
background-color: yellow;
width: 200px;
height: 100px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<div class="main">
<div class="content"></div>
</div>
複製程式碼
5. Flex + align-items
適用場景：多物件垂直居中
原理：Flex 佈局 align-items 垂直居中，justify-content 水平居中
示例如下
<style>
.main{
border: solid 1px red;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="main">
<div>我居中了</div>
<div>我也居中了</div>
</div>
複製程式碼
6. display：table-cell
適用場景：多行文字的垂直居中技巧
原理：利用 display 將 div 設定成表格的單元格，然後利用 veritical-align 實現垂直居中
示例如下
<style>
.main{
border: solid 1px red;
width: 400px;
height: 400px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div class="main">
<div>我居中了</div>
</div>
複製程式碼
7. translate + absolute
這種方法和方法三類似
適用場景：多行文字垂直居中
原理：利用絕對定位 top 和 left 50%，然後減去元素本身內容區的一半，就可以實現居中
示例如下
<style>
.main{
border: solid 1px red;
width: 400px;
height: 400px;
position: fixed;
}
.content{
position: absolute;
background-color: yellow;
width: 200px;
height: 100px;
transform: translate(-50%, -50%);
top:50%;
left: 50%;
}
</style>
<div class="main">
<div class="content"></div>
</div>
複製程式碼
8. :before + inline-block
適用場景：多物件垂直居中
原理：利用 :before 偽類元素設定為 100% 高的 inline-block，再搭配上將需要居中的子元素同樣設定成 inline-block 性質後，就能使用 vertical-align:middle 來達到垂直居中的目的了，該方法需要注意去掉 inline-block 元素之間的 4-5px 小空隙。
示例如下
<style>
.main{
border: solid 1px red;
width: 400px;
height: 400px;
text-align: center;
}
.main::before{
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
width: 0;
}
.content{
background-color: yellow;
width: 200px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
</style>
<div class="main">
<div class="content"></div>
</div>
複製程式碼