css文字上下居中对齐
文章描述：
css如何让文字上下居中对齐，当文本缩小时，文字还是上下居中对齐
Flex布局
<div class="m520 text-flex">
<span>枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。</span>
</div>.container {
margin-top:100px;
}
.m520 {
max-width:520px;
height:200px;
border:1px solid #ccc;
font-size:12px;
margin-bottom:20px;
text-align:center;
}
.box-flex {
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
总结：使用flex布局文字上下居中对齐，当模块缩小时，文字换成两排后还是居中显示，推举使用此方法。
line-height属性
<div class="m520 box-line-height">
<span>枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。</span>
</div>.box-line-height span {
line-height:200px;
}总结：使用line-height来使文字上下居中对齐时，当模块缩小成两行后，文字就不能居中对齐了。
position 定位
<div class="m520 box-position">
<span class="text">枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。</span>
</div>.box-position {
text-align:center;
}
.box-position .text {
position:absolute;
top:50%;
left:auto;
transform:translate(-50%,-50%);
}vertical-align属性
<div class="m520 vertical-align">
<span>枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。</span>
</div>.vertical-align::before {
content:" ";
display:inline-block;
height:100%;
width:1%;
vertical-align:middle;
}
.vertical-align span {
vertical-align:middle;
}
发布时间：2021/07/28
发表评论