display:table-cell實現水平垂直居中

時間 2019-11-16

標籤 display table cell 實現水平垂直居中欄目 CSS 简体版

原文原文鏈接

　　若是查看css手冊，會發現display有許多帶table字樣的可選屬性，有table、inline-table、table-row-group、table-row、table-cell等10個之多，能夠賦予div相似於<table>等標籤的佈局特性。大多數瀏覽器（IE6/7除外）對其支持良好，其實現原理參考《匿名錶格元素》。css

　　組合使用display:table-cell和vertical-align、text-align，使父元素內的全部行內元素水平垂直居中（內部div設置display:inline-block便可）。這在子元素不肯定寬高和數量時，特別實用！html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo001_displayTable</title>
    <style>
        /*** table-cell middle center組合使用 ***/
        .cell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 240px;
            height: 180px;
            border:1px solid #666;
        }
    </style>
</head>
<body>
    <div class="cell">
        <p>我愛你</p>
    </div>
    <div class="cell">
        <p>我愛你</p><p>親愛的中國</p>
    </div>
    <div class="cell">
        <p>我愛你</p><p>親愛的中國</p><div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
    </div>
</body>
</html>

　　效果：瀏覽器

　　對於只須要垂直居中的狀況，能夠去掉text-align:center屬性。wordpress

　　對table-cell元素設置百分比（如100%）的寬高值時無效的，可是能夠將父元素設置display:table，再將父元素設置百分比寬高，子元素table-cell會自動撐滿父元素。這就能夠作相對於整個頁面的水平垂直居中。代碼示例以下：佈局

    <style>
        html,body{height: 100%;margin:0;padding:0;}
        /*** .table和.cell都將撐滿頁面，cell的子元素水平垂直居中 ***/
        .table{
            display: table;
            width: 100%;
            height: 100%;
        }
        .cell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            border: 1px solid #666;
        }
    </style>
    <div class="table">
        <div class="cell">
            <p>我愛你</p>
            <p>親愛的中國</p>
            <div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
        </div>
    </div>

　　table系列的display屬性還能夠實現等高佈局、靈活頁眉/頁腳、水平自適應佈局等等，參考文章《css Table佈局》《display:table-cell的應用》。ui