前提:
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;
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);
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{
background-color: aqua;
}
2、居于視口機關的解決方案:
可通過使用margin-top: 50vh;配合transform:translateY(-50%);實作視口居中
.content{
width: 18em;
margin-top: 50vh;
transform: translateY(-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;
}