Siêu giữa

Dùng place-items: center để căn giữa một phần tử trong phần tử mẹ.

Trước tiên, hãy chỉ định lưới làm phương thức hiển thị, sau đó viết place-items: center trên cùng một phần tử. place-items là cách viết tắt để thiết lập cả align-items và justify-items cùng một lúc. Khi bạn đặt giá trị này thành center, cả align-items và justify-items đều được đặt thành center.

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

Điều này cho phép nội dung được căn giữa hoàn toàn trong thành phần mẹ, bất kể kích thước nội tại.

HTML

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

CSS

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

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