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

時間 2019-11-26

標籤關於 display table 元素居中小結欄目 CSS 简体版

原文原文鏈接

咱們都知道讓元素垂直居中有一種簡單的方法：給須要居中的元素用一個父級包起來，並給它設置樣式：display：table；同時給這個父級設置好高度；再給須要居中的元素一個display：table-cell；vertical-align:middle;這樣被設置的元素就能夠作到垂直居中，實現代碼以下：html

<!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以後，元素又不能居中了！！！：spa

這是怎麼回事呢，因而又接着作了個test，發現脫離文檔流的元素給它設置display屬性以後竟然不生效（拿position和float脫離文檔流），我的在以前對脫離文檔流的元素作了一個小結，它的表現形式有點像是display：inline-block；因此說了要是想用position：table-cell的方式讓元素垂直居中須要避免給它脫離了文檔流code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。