關於用display：table讓元素居中的小結

簡簡和單單發表於2016-07-19

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




相關文章