Html 使用display:table在页面上居中显示模式？

我尝试了这个，我发现这是一个建议，所以：

 <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>

xxx

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

---

更新：水平位置现在通过使用id模式的显示：内联块来固定

应用

显示：内联块到id为
模式的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>

请参阅此工作提琴：
将显示：表格单元格添加到模式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>


xxx

文本对齐：中心仅适用于内联内容。因此，div#model必须显示：inline块；谢谢这修正了水平定心。但垂直方向还不在中间。有什么想法吗？
 <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>