css实现元素居中的方法

发布时间：2023-09-11 11:15:49 所属栏目：语言来源：

导读：单行文本的垂直居中是最简单的，设置line-height与盒子高度一样就可以。这里有一个误区，很多人设置单行文本居中的时候会同时设置height与line-height相同，其实大可不必设置height,只设置line-height就可以，这时候

单行文本的垂直居中是最简单的，设置line-height与盒子高度一样就可以。这里有一个误区，很多人设置单行文本居中的时候会同时设置height与line-height相同，其实大可不必设置height,只设置line-height就可以，这时候盒子的高度由line-height撑起来，与line-height完全相同。
.center {
// 完全可以不设置高度
// height: 20px;
line-height: 20px;
}

多行文本垂直居中
vertical-align可以指定行内元素的垂直对齐方式。这个方法需要多增加一个.center元素将需要居中的内容包裹起来。设置父元素的line-height为元素的高度，居中子元素.center的display为inline-block，使其拥有行内元素的特性，因为line-height的继承性，所以设置line-height: 20px;重置居中子元素的line-height，然后设置vertical-align: middle;在行框盒子内垂直居中对齐。

<div class="box">
<div class="center">
虽然你们是扮演路人甲乙丙丁，但是一样是有生命、有灵魂的。
</div>
</div>
<style>
.box {
background-color: orange;
line-height: 200px;
width: 300px;
}
.center {
background-color: green;
line-height: 20px;
display: inline-block;
vertical-align: middle;
}
</style>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!