如何使用顯示錶格單元水平（和垂直）對齊框？

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

請確認一下，它會爲你做詭計。