Question

我试过这个，我在SO上发现了这个建议：

 <div style="display:table; width: 100%; height: 100%">
        <div style="display:table-cell; vertical-align:middle; text-align:center;">
            <div id="modal" style="width: 10rem; height: 10rem;">
                xxx
            </div>
        </div>
 </div>

这似乎并不是模态的中心。谁能告诉我我可能做错了什么？

更新：现在通过使用display：inline-block for id modal

来修复水平位置

Answer 1

将display: inline-block;应用于ID为modal的div。

<div style="display:table; width: 100%; height: 100%">
        <div style="display:table-cell; vertical-align:middle; text-align:center; ">
            <div id="modal" style="width: 10rem; height: 10rem; display: inline-block;">
                xxx
            </div>
        </div>
</div>

并应用此CSS：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

看到这个工作小提琴：http://jsfiddle.net/8uhbh6jz/

Answer 2

将display：table-cell添加到modal div

 <div style="display:table; width: 100%; height: 100%">
    <div style="display:table-cell; vertical-align:middle; text-align:center;">
        <div id="modal" style="display:table-cell; vertical-align:middle; width: 10rem; height: 10rem;">
            xxx
        </div>
    </div>

使用display：table来设置页面上的模态？

2 个答案: