怎样让div的内容水平垂直居中

Posted 2023-03-18

水平居中直接给div加style="text-align: center"样式就可以实现；
垂直居中html并没有给相应的方法，只能靠我们自己来配置，比如一个宽高都是
400px的div盒子，内置一个宽高都是200的div盒子，可以通过margin或者padding属性来调整
位置
<div style="width:400px;height:400px;text-align:center;background-color:red;">
    <div style="width:200px;height:200px;background-color:green;
        position:absolute;margin-left:100px;margin-top:100px;">
    </div>
</div>

参考技术A center居中

实现div内容水平垂直居中

参考技术A div内容水平居中是很多网站需要的用到的，即保持div包含内容的水平和垂直居中。

text-align属性可以是包含内容水平居中，而设置 line-height 属性，这是行距属性，当设置为div高度时，其所含内容就垂直居中了。

注意：line-height的值需要设置成与div高度相等，才能达到垂直居中效果。