`div`中的内容水平垂直居中
程序员文章站
2022-04-24 22:17:26
...
让div里的内容水平垂直居中
1、line-height（div的高度已知）
要让div中的元素垂直居中，只需要设置div容器的line-height和height一致即可。再通过设置text-align: center;达到水平居中。
<style>
.content {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: pink;
}
</style>
<body>
<div class="content">
<p>p要垂直居中显示</p>
</div>
</body>
2、模拟表格法
将div容器设置为display:table;，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell;，然后加上vertical-align:middle;来实现。
<style>
.content {
width: 200px;
height: 200px;
display: table;
text-align: center;
background-color: pink;
}
p {
vertical-align: middle;
display: table-cell;
}
</style>
<div class="content">
<p>p要垂直居中显示</p>
</div>
3、padding方法
div在不设置高度的时候，会被里面的内容撑开，内容自动填充在div中，无论是一行内容还是多行内容，此时不需要设置垂直居中，内容自动在中间的。
<style>
.content {
width: 200px;
background-color: pink;
padding: 20px;
}
</style>
<div class="content">
<p>p要垂直居中显示</p>
<p>p要垂直居中显示</p>
<p>p要垂直居中显示</p>
<p>p要垂直居中显示</p>
</div>
4、使用transform: translateX(-50%);和left: 50%;top: 50%;
其实这个方法的思路是这样的：要让元素居中就给他
left50%好了。可是元素本身还有宽度，left50%之后元素的左边位于页面的中间而不是元素本身。
所以再设置transform: translateX(-50%);让元素相对于自身偏移50%使得元素的中心位于外侧容器中心就能达到水平居中的效果。
.content {
position: relative;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
background-color: deeppink;
}
p {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
}