Posted in HTML / CSS onMarch 31, 2021
行内元素
- 通过为父元素设置text-align、line-height属性实现元素垂直居中
.box{
width:500px;
height:100px;
border:1px solid #333;
line-height:100px;
text-align:center;
}
<div class="box">
<span>content</span>
</div>
块级元素
- 通过设置子元素的绝对定位和margin属性实现元素垂直居中(减去自身宽度高度的一半)
.box{
width: 500px;
height: 500px;
border: 1px solid #333;
position: relative;
}
.box div{
width: 100px;
height: 100px;
border: 1px solid #333;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
<div class="box">
<div></div>
</div>
- 通过设置父元素flex弹性布局的方式实现元素垂直居中(项目在主轴上的对齐方式为居中,项目在交叉轴上对齐方式为居中)
.box{
width: 500px;
height: 500px;
border: 1px solid #333;
display: flex;
justify-content: center;
align-items: center;
}
.box div{
width: 100px;
height: 100px;
border: 1px solid #333;
}
<div class="box">
<div></div>
</div>
- 通过设置子元素的绝对定位和transform属性实现元素垂直居中(往x轴、y轴分别移动自身宽度和高度的50%)
.box{
width: 500px;
height: 500px;
border: 1px solid #333;
position: relative;
}
.box div{
width: 100px;
height: 100px;
border: 1px solid #333;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
<div class="box">
<div></div>
</div>
- 通过设置子元素的绝对定位和margin属性实现元素垂直居中(不存在兼容性问题,自适应宽高)
原理:
设置margin:auto分配左右的剩余空间,所以元素可以水平居中;设置绝对定位,此时margin-top、margin-bottom从默认为0变成auto,设置top、right、bottom、left为0将找到父元素的位置(给浏览器重新分配一个边界框),填充其父元素的所有可用空间,margin垂直方向有了可分配的空间,所以此时元素可以垂直居中。
.box{
width: 500px;
height: 500px;
border: 1px solid #333;
position: relative;
}
.box div{
width: 100px;
height: 100px;
border: 1px solid #333;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
<div class="box">
<div></div>
</div>
元素水平垂直居中的方式
- Author -
食不食康康声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@