我们都知道让元素垂直居中有一种简单的方法：给需要居中的元素用一个父级包起来，并给它设置样式：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：left之后，元素又不能居中了！！！：
这是怎么回事呢，于是又接着做了个test，发现脱离文档流的元素给它设置display属性之后居然不生效（拿position和float脱离文档流），个人在之前对脱离文档流的元素做了一个小结，它的表现形式有点像是display：inline-block；所以说了要是想用position：table-cell的方式让元素垂直居中需要避免给它脱离了文档流