html - 如何使用显示表格单元格水平(和垂直)对齐框？

Question

如何使用 display table-cell 水平(和垂直)对齐框？

vertical-align: middle; 
display: table-cell;

我有这个示例 fiddle : https://jsfiddle.net/Lrmg3zna/

Answer 1

通过在 DOM 中稍作更改，您可以垂直 和水平 对齐您的 block 。

<div style="height: 400px; width: 400px; background: blue; vertical-align: middle; margin: 0 auto;display: table-cell; text-algin: center;">
<!-- insert a div here -->
     <div style="height: 200px; display: block; width: 200px; margin: 0px auto;">
        <div style="height: 200px; display: table-cell;width: 200px; background: red; vertical-align: middle; margin: 0 auto; text-algin: center;">
            <div style="height: 100px; width: 100px; background: green; vertical-align: middle; margin: 0 auto;"></div>
        </div>
<!-- div ends here -->
     </div>

我在这里更新了您的 JSFiddle也是。

请务必看一下，它会为您解决问题。