css實現垂直居中的幾種方式（佈局常用）
前提：
html模板：
<div class="parent">
<div class="content">內容垂直居中</div>
</div>
宣告：以下示例，主要實現垂直居中的樣式程式碼為加粗的部分
一、對單行元素進行垂直居中時
1、可設定該行內元素的父元素的height與line-heigth的值相等，讓行內元素垂直居中
2、針對行內元素，可通過設定vertical-align: middle;以及line-height進行垂直居中
二、對文字進行垂直居中
1、針對文字，通過display:flex;配合align-items和justify-content實現文字居中
.content{
display: flex;
align-items: center;
justify-content: center;
}
三、對已知高度塊級元素進行垂直居中
1、絕對定位，配合top:50%和負margin-top(元素高度一半)進行垂直居中
.content{
position: absolute;
top: 50%;
left: 50%;
margin-top: -10em; /* 為元素height/2 */
margin-left: -10em;
width: 20em;
height: 20em;
background-color: aqua;
}
2、絕對定位，配合top:0;bottom:0;和margin:auto進行垂直居中
.content{
position: absolute;
margin：auto；
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 200px; /*要求指明元素高度*/
background-color: aqua;
}
3、設定position:absolute;和calc()函式實現垂直居中
.content{
position: absolute;
top:calc(50% - 10em); /*calc(50% - 元素本身高度一半)*/
left: calc(50% - 20em); /*注意使用時減號間有空格*/
width: 40em;
height: 20em;
background-color: aqua;
}
4、使用浮動float實現元素垂直居中
原理：通過在要進行垂直居中的元素a前面新增一個無內容的元素，並將該無內容元素的高設定為50%，在利用clear:botn清除浮動，則元素a相對於父元素來說是垂直居中。
html如下：
<div class="parent">
<div class="float"></div>
<div class="content">
<div><span>內容垂直居中內容垂直居中內容容垂居中</span></div>
</div>
</div>
css如下：
.parent{
height: 500px;
background-color: red;
}
.float{ /**新增的輔助元素/
height: 50%;
}
.content{
clear: both;
background-color: aqua;
}
四、對未知高度塊級元素進行垂直居中
1、設定position：absolute；和transform:traslate(x,y)實現水平垂直居中
.content{
position: absolute;
margin：auto；
top: 50%;
left: 50%;
transform:translate(-50%,-50%); /*針對元素本身向左以及向上移動50%*/
background-color: aqua;
}
2、居於視口單位的解決方案：
可通過使用margin-top: 50vh;配合transform:translateY(-50%);實現視口居中
.content{
width: 18em;
margin-top: 50vh; /*50vh表示視口高度的50%*/
transform: translateY(-50%); /*相對元素自身向上移動50%*/
background-color: aqua;
}
3、通過display:table-cell和vertical-align:middle;實現垂直居中
.parent{
display: table;
width: 50px; /*建議設定寬高，以便於檢視效果*/
height: 500px;
}
.content{
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
4、基於flex的解決方案：
.parent{
display: flex;
background-color: beige;
}
.content{
margin: auto; /*自動相對於父元素水平垂直居中*/
background-color: aqua;
}