如何使用显示表单元格水平（和垂直）对齐框？

Question

如何使用display table-cell水平（和垂直）对齐方框？

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

我有这个样本小提琴： https://jsfiddle.net/Lrmg3zna/

Answer 1

如果DOM略有变化，您可以将vertically和horizontally对齐。

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

请看一下，它会为你做到这一点。