方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-align:middle和text-align:center即可垂直居中。
.div1{
height:300px;
width: 300px;
background-color: cadetblue;
display: table;
}
.span1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="div1">
<span class="span1">
方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-align:middle即可垂直居中
</span>
</div>
方法二:对子元素设置display:inline-block属性,使其转化成行内块元素,模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性,使其基线对齐。添加line-height属性,覆盖继承自父元素的行高。缺点:文本的高度不能超过外部盒子的高度。
.div1{
height:300px;
width: 300px;
background-color: cadetblue;
line-height: 300px;
}
.span1{
display: inline-block;
line-height: 20px;
text-align: center;
vertical-align: middle;
}
<div class="div1">
<span class="span1">
方法二:对子元素设置display:inline-block属性,使其转化成行内块元素,模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性,使其基线对齐。添加line-height属性,覆盖继承自父元素的行高。缺点:文本的高度不能超过外部盒子的高度。
</span>
</div>
方法三:脱离文档流的居中方式,使用定位,为父盒子设置宽高,使用相对定位,子盒子使用绝对定位,先向右向下偏移50%,再通过transform偏移自身宽度和长度的一半达到居中
.div1{
height:300px;
width: 300px;
background-color: cadetblue;
position: relative;
}
.div2
{
width: 240px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class="div1">
<div class="div2">
方法三:脱离文档流的居中方式,使用定位,为父盒子设置宽高,使用相对定位,子盒子使用绝对定位,先向右向下偏移50%,再通过transform偏移自身宽度和长度的一半达到居中
</div>
</div>