要素を親内の中央に配置するには、place-items: center
を使用します。
まず、表示メソッドとして grid を指定してから、同じ要素に place-items: center
を書き込みます。place-items
は、align-items
と justify-items
の両方を一度に設定するための短縮形です。center
に設定すると、align-items
と justify-items
の両方が center
に設定されます。
.parent {
display: grid;
place-items: center;
}
これにより、固有のサイズに関係なく、コンテンツを親の中央に完全に配置できます。
HTML
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
CSS
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}