垂直居中
1.元素高度确定的单行文本垂直居中
- 元素设置 line-height,其值与元素高度 height 相同
<style>
.background{
background-color: #368;
width: 400px;
height: 200px;
display: flex;
align-items: center;
}
p{
line-height: 400px;
color: #fff;
}
</style>
<div class="background">
<p>HELLO!</p>
</div>
效果图:
2.元素高度确定的多行文本、图片、块级元素的垂直居中
方法一:
- 父元素设置 position: relative
- 子元素设置 position: absolute,top: 50%,设置 margin-top 对子元素进行上移,值的大小为子元素高度的一半
- 缺点:灵活性差,不利于维护,position: absolute 和 position: relative 会带来副作用
<style>
.background{
position: relative;
background-color: #368;
width: 500px;
height: 500px;
}
.test{
position: absolute;
top: 50%;
width: 150px;
height: 150px;
margin-top: -75px;
background-color: #eee;
}
</style>
<div class="background">
<div class="test">
</div>
</div>
效果图:
方法二:
- 父元素设置 display: flex,align-items: center
- 父元素要指定宽度和高度
<style>
.background{
background-color: #368;
width: 400px;
height: 400px;
display: flex;
display: -webkit-flex; /*Safari*/
align-items: center; /*垂直居中,justify-content: center; 可设置水平居中*/
}
.test{
width: 100px;
height: 100px;
background-color: #eee;
}
</style>
<div class="background">
<div class="test">
</div>
</div>
效果图:
欢迎补充!