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

Question

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

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 。

请看一下，它将为您解决问题。