如何正確利用“ display:table ”實現(xiàn)垂直水平居中。

“純CSS實現(xiàn)垂直水平居中”的一個方法叫“ 利用 display:table 實現(xiàn) ”，自己動手實現(xiàn)過程中遇到障礙：

代碼：

  <body>
    <style type="text/css">
        .wrp {
            width: 500px;
            height: 500px;
            background-color: #0022df;/* 外：藍(lán)色 */
        }
        .con {
            width: 250px;
            height: 250px;
            background-color: #aa0021;/* 外：紅色 */
        }
        .wrapper {
            display: table;
        }
        .subwrapper {
            display: table-cell;
            vertical-align: middle;
        }
        .content {
            width: auto;
            height: auto;
            max-height: 80%;
            max-width: 80%;
        }
    </style>
    <div class="wrp wrapper">
        <div class="subwrapper">
            <div class="con content">
            </div>
        </div>
    </div>
</body>

現(xiàn)象：里面的紅色div不見了，如下圖所示。
圖片描述

然后，我把.content里的內(nèi)容注釋掉了，代碼如下：

    .content {
            /* width: auto;
            height: auto;
            max-height: 80%;
            max-width: 80%; */
    }

于是，紅色的div又顯示出來（但是顯然不是居中的），如下圖：
圖片描述

======提問：================
1.我的“利用display：table實現(xiàn)垂直水平居中”到底錯在哪里？
2.對于.content{}中的內(nèi)容

    .content {
            width: auto;
            height: auto;
            max-height: 80%;
            max-width: 80%;
    }

是不是存在瀏覽器不兼容的問題（我的瀏覽器是chrome、并且我也試過火狐，都無法顯示紅色div）？

=======環(huán)境：==================
瀏覽器：chrome

=======博客鏈接：===============
http://blog.csdn.net/shiyuqio...

=======謝謝前輩的解惑）=========

回答

編輯回答

法克魷

去掉.content樣式，再在.con里面加個margin:0 auto;

    <style type="text/css">
        .wrp {
            width: 500px;
            height: 500px;
            background-color: #0022df;/* 外：藍(lán)色 */
        }
        .con {
            width: 250px;
            height: 250px;
            background-color: #aa0021;/* 外：紅色 */
            margin:0 auto;
        }
        .wrapper {
            display: table;
        }
        .subwrapper {
            display: table-cell;
            vertical-align: middle;
        }
    </style>

2018年8月30日 01:43

編輯回答

瞄小懶

破案了。

原因：------------
紅色div在.content中顯示不出，是因為:
① div.content里不再有內(nèi)容
②而.content里的width:auto、height:auto使紅色div的高寬跟隨子元素高寬自動調(diào)整，如果沒有子元素（高寬各為0），則div.content（也就是紅色div 的高寬也為0，即：不顯示）

解決方案：--------------------
所以：教程 http://blog.csdn.net/shiyuqio... 第5方法寫錯了。
display:table + display:table-cell; vertical-align + width: auto; height: auto; max-height: xx%; max-width: xx%; 沒毛病，只是“width: auto; height: auto; max-height: xx%; max-width: xx%;”不應(yīng)該作用在 .content。

代碼：

<style type="text/css">
    .wrp {
        width: 500px;
        height: 500px;
        background-color: #0022df;/* 外：藍(lán)色 */
    }
    .con {
        width: 250px;
        height: 250px;
        background-color: #aa0021;/* 外：紅色 */
    }
    .wrapper {
        display: table;
    }
    .subwrapper {
        display: table-cell;
        vertical-align: middle;
        width: auto;
        height: auto;
        max-height: 80%;
        max-width: 80%;
    }
</style>

效果：
圖片描述

2017年8月8日 12:00