超置中

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

請先將格線指定為顯示方法，然後在同一個元素上寫入 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;
}