1.用line-height实现
当需要居中的元素是有内容的行内元素或者文字时,只需要设置父容器line-height
即可实现垂直居中。
html
<div class="content">
<span>Diana</span>
</div>
CSS
.content{
width: 100px;
line-height: 500px;
border: 2px solid black;
}
span{
background-color: violet;
}
设置行高一般用于让文字居中。
2.使用margin或者padding挤压
这个方法只有知道父容器和子元素的高度的情况下才能使用。
html
<div class="content">
<div class="div1"></div>
</div>
CSS(使用margin
挤压)
.content{
width: 100px;
height: 200px;
border: 2px solid black;
}
.div1{
width: 100px;
height: 100px;
background-color: violet;
margin-top: 50px;
}
或者在父容器中使用padding
挤压
.content{
width: 100px;
height: 150px;
border: 2px solid black;
padding-top: 50px;
}
.div1{
width: 100px;
height: 100px;
background-color: violet;
}
当然可以使用margin
与padding
结合挤压子元素,同样可以实现垂直居中。
3.使用absolute+margin实现
先将子元素设置position: absolute
,再通过调整子元素的边距和margin
来实现垂直居中。
position: absolute;
height: 高度值;
top: 50%;
margin-top: -(高度值/2);
案例:
.content{
width: 100px;
height: 200px;
border: 2px solid black;
position: relative;
}
.div1{
width: 100px;
height: 100px;
background-color: violet;
position: absolute;
top: 50%;
margin-top: -50px;
}
4.使用flex布局实现
设置父容器flex布局并设置align-items: center,不需要对子元素进行设置即可实现垂直居中
.content{
width: 100px;
height: 200px;
border: 2px solid black;
display: flex;
align-items: center;
}
.div1{
width: 100px;
height: 100px;
background-color: lawngreen;
}