我們都知道讓元素垂直居中有一種簡單的方法：給需要居中的元素用一個父級包起來，並給它設置樣式：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的方式讓元素垂直居中需要避免給它脫離了文檔流