ディスプレイを使用している場合、中央に表示されない：テーブルセル

Question

htmlにはdisplay: table、bodyにはdisplay: table-cellを使用しています。最近、すべての内容が画面中央に表示されます。これは段落、見出し、入力、ラベルなどで動作しますが（少なくとも私がテストした限り）、div要素では動作しません。
divの要素にこの方法を適用する方法はありますか？純粋なCSSソリューションが最適でしょう。

例（also on Codepen）

html { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
body { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.leaf { 
 
    border-radius: 15px 2px 15px 2px; 
 
    border: 1px solid green; 
 
    background-color: green; 
 
    width: 250px; 
 
    height: 80px; 
 
}

<div class="leaf">Why am I not centered?</div> 
 
<p>And why am I centered?</p>

Answer 1

ちょうどいい仕事.. margin: 0 auto;を追加します。 0自動;：

html { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
body { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.leaf { 
 
    border-radius: 15px 2px 15px 2px; 
 
    border: 1px solid green; 
 
    background-color: green; 
 
    width: 250px; 
 
    height: 80px; 
 
    margin:0 auto; 
 

 
}

<div class="leaf">Why am I not centered?</div> 
 
<p>And why am I centered?</p>

Answer 2

だけマージンを追加.leafクラスへの。

html { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
body { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.leaf { 
 
    margin: 0 auto; 
 
    border-radius: 15px 2px 15px 2px; 
 
    border: 1px solid green; 
 
    background-color: green; 
 
    width: 250px; 
 
    height: 80px; 
 
}

<div class="leaf">Why am I not centered?</div> 
 
<p>And why am I centered?</p>