超置中

使用 place-items: center 將元素置於其父項中央。

請先將格線指定為顯示方法,然後在同一個元素上寫入 place-items: centerplace-items 是同時設定 align-itemsjustify-items 的簡寫。設為 center 後,align-itemsjustify-items 都會設為 center

.parent {
 
display: grid;
 
place-items: center;
}

如此一來,無論內建函式的大小為何,內容都可在父項中置中顯示。

<div class="parent">
 
<div class="box" contenteditable="">
    :)
 
</div>
</div>

       
.parent {
 
display: grid;
 
place-items: center;

 
/* Just for parent demo size */
 
height: 100vh;
}