关于用display：table让元素居中的小结

时间：2021-11-10 08:25:50

我们都知道让元素垂直居中有一种简单的方法：给需要居中的元素用一个父级包起来，并给它设置样式：display：table；同时给这个父级设置好高度；再给需要居中的元素一个display：table-cell；vertical-align:middle;这样被设置的元素就可以做到垂直居中，实现代码如下：



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<div style="background-color: aquamarine;display:table;height: 600px;">
    <!--如果这里设置了背景色，那么页面上则会显示这部分的颜色-->
    <div style="display: table-cell;vertical-align: middle;background-color: green">
       这是一个测试信息
    </div>
</div>
</body>
</html>


 




效果图如下


关于用display：table让元素居中的小结


但是如果给这个需要居中的元素一个display：left之后，元素又不能居中了！！！：


关于用display：table让元素居中的小结


这是怎么回事呢，于是又接着做了个test，发现脱离文档流的元素给它设置display属性之后居然不生效（拿position和float脱离文档流），个人在之前对脱离文档流的元素做了一个小结，它的表现形式有点像是display：inline-block；所以说了要是想用position：table-cell的方式让元素垂直居中需要避免给它脱离了文档流
相关文章