Berpusat di CSS Grid

179

Saya mencoba membuat halaman sederhana dengan CSS Grid.

Apa yang saya gagal lakukan adalah memusatkan teks dari HTML ke masing-masing sel kisi.

Saya sudah mencoba menempatkan konten dalam divs terpisah baik di dalam maupun di luar left_bgdan right_bgpemilih dan bermain dengan beberapa properti CSS tidak berhasil.

Bagaimana saya melakukan ini?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Luaskan cuplikan

— akar bit
sumber

Silakan periksa tautan w3.org/Style/Examples/007/center.en.html , saya harap ini akan membantu.

— Ali

Jawaban:

433

Jawaban ini memiliki dua bagian utama:

Memahami bagaimana penyelarasan bekerja di CSS Grid.
Enam metode untuk memusatkan di CSS Grid.

Jika Anda hanya tertarik dengan solusinya, lewati bagian pertama.

Struktur dan Lingkup tata letak Grid

Untuk memahami sepenuhnya bagaimana pemusatan bekerja dalam wadah kisi, penting untuk terlebih dahulu memahami struktur dan cakupan tata letak kisi.

Struktur HTML wadah kotak memiliki tiga tingkatan:

wadah
barang itu
konten

Masing-masing level ini independen dari yang lain, dalam hal menerapkan properti grid.

The lingkup dari wadah grid terbatas pada hubungan orangtua-anak.

Ini berarti bahwa wadah kotak selalu orang tua dan item kotak selalu menjadi anak. Properti Grid hanya berfungsi dalam hubungan ini.

Keturunan wadah kotak di luar anak-anak bukan bagian dari tata letak kotak dan tidak akan menerima properti kotak. (Setidaknya tidak sampai subgridfitur tersebut diimplementasikan, yang akan memungkinkan keturunan item kisi menghormati garis-garis wadah utama.)

Berikut adalah contoh konsep struktur dan ruang lingkup yang dijelaskan di atas.

Bayangkan sebuah kotak seperti tic-tac-toe-like.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

Anda ingin X dan O dipusatkan di setiap sel.

Jadi, Anda menerapkan pemusatan pada level kontainer:

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

Tetapi karena struktur dan cakupan tata letak kisi, justify-itemspada wadah memusatkan item kisi, bukan konten (setidaknya tidak secara langsung).

Tampilkan cuplikan kode

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

Luaskan cuplikan

Masalah yang sama dengan align-items: Konten dapat dipusatkan sebagai produk sampingan, tetapi Anda kehilangan desain tata letak.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

Tampilkan cuplikan kode

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

Luaskan cuplikan

Untuk memusatkan konten Anda perlu mengambil pendekatan yang berbeda. Merujuk kembali pada struktur dan cakupan tata letak kisi, Anda perlu memperlakukan item kisi sebagai induk dan konten sebagai anak.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

Tampilkan cuplikan kode

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

Luaskan cuplikan

Demo jsFiddle

Enam Metode untuk Pemusatan di CSS Grid

Ada beberapa metode untuk memusatkan item kisi dan kontennya.

Berikut kisi dasar 2x2:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Luaskan cuplikan

Flexbox

Untuk cara sederhana dan mudah untuk memusatkan isi item kisi, gunakan flexbox.

Lebih khusus, jadikan item kisi-kisi menjadi wadah fleksibel.

Tidak ada konflik, pelanggaran spesifikasi atau masalah lain dengan metode ini. Ini bersih dan valid.

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

Tampilkan cuplikan kode

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Luaskan cuplikan

Lihat posting ini untuk penjelasan lengkap:

Cara Memusatkan Elemen secara Vertikal dan Horizontal di Flexbox

Tata Letak Kotak

Dengan cara yang sama bahwa item fleksibel juga bisa menjadi wadah fleksibel, item kotak juga bisa menjadi wadah kotak. Solusi ini mirip dengan solusi flexbox di atas, kecuali pemusatan dilakukan dengan properti grid, bukan flex.

Tampilkan cuplikan kode

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Luaskan cuplikan

`auto` margin

Gunakan margin: autountuk memusatkan item kisi secara vertikal dan horizontal.

grid-item {
  margin: auto;
}

Tampilkan cuplikan kode

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Luaskan cuplikan

Untuk memusatkan konten item kisi Anda perlu membuat item menjadi wadah kisi (atau melenturkan), bungkus item anonim dalam elemen mereka sendiri ( karena mereka tidak dapat langsung ditargetkan oleh CSS ), dan menerapkan margin ke elemen baru.

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

Tampilkan cuplikan kode

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Luaskan cuplikan

Properti Alignment Box

Saat mempertimbangkan menggunakan properti berikut untuk menyelaraskan item kisi, baca bagian automargin di atas.

align-items
justify-items
align-self
justify-self

https://www.w3.org/TR/css-align-3/#property-index

`text-align: center`

Untuk memusatkan konten secara horizontal dalam item kisi, Anda dapat menggunakan text-alignproperti.

Tampilkan cuplikan kode

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Luaskan cuplikan

Perhatikan bahwa untuk pemusatan vertikal, vertical-align: middletidak akan berfungsi.

Ini karena vertical-alignproperti hanya berlaku untuk inline dan wadah sel-tabel.

Tampilkan cuplikan kode

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Luaskan cuplikan

Orang mungkin mengatakan bahwa display: inline-gridmembangun wadah tingkat inline, dan itu akan benar. Jadi mengapa tidak vertical-alignberfungsi di item kisi?

Alasannya adalah bahwa dalam konteks pemformatan kisi , item diperlakukan sebagai elemen tingkat blok.

6.1. Tampilan Item Kisi

The displaynilai item grid blockified : jika ditentukan displaydari anak di-aliran unsur menghasilkan wadah grid nilai inline-tingkat, itu menghitung untuk setara blok-level.

Dalam konteks pemformatan blok , sesuatu yang vertical-alignawalnya dirancang untuk properti itu, browser tidak berharap menemukan elemen level blok dalam wadah level inline. Itu HTML tidak valid.

Pemosisian CSS

Terakhir, ada solusi pemusatan CSS umum yang juga berfungsi di Grid: penentuan posisi absolut

Ini adalah metode yang baik untuk memusatkan objek yang perlu dihapus dari aliran dokumen. Misalnya, jika Anda ingin:

Cukup atur position: absoluteelemen yang akan dipusatkan, dan position: relativepada leluhur yang akan berfungsi sebagai blok yang berisi (biasanya induknya). Sesuatu seperti ini:

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Tampilkan cuplikan kode

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Luaskan cuplikan

Berikut ini penjelasan lengkap tentang cara kerja metode ini:

Elemen tidak akan tetap terpusat, terutama saat mengubah ukuran layar

Inilah bagian tentang penentuan posisi absolut dalam spesifikasi Kotak:

https://www.w3.org/TR/css3-grid-layout/#abspos

— Michael Benjamin
sumber

Halo Michael, saya bertanya-tanya apakah mungkin hanya dengan menggunakan kisi untuk mengubah ukuran setiap kolom ke ukuran kolom terkecil di baris?

— The Codesee

@TheCodesee, itu dimungkinkan, tergantung pada semua persyaratan Anda .. Apakah Anda memiliki sampel kode? Atau pertimbangkan memposting pertanyaan baru dengan semua detailnya.

— Michael Benjamin

adalah grid-container& grid-itemadalah HTML tag?

— diEcho

Itu adalah tag HTML khusus . Anda dapat membuat tag Anda sendiri, seperti yang saya lakukan untuk demo ini. stackoverflow.com/q/36380449/3597276 @ pro.mean

— Michael Benjamin

Ini jawaban yang bagus, terima kasih. Itu membuat saya menyadari, dalam dua contoh pertama Anda, bahwa antara flexdan grid, align-itemstetap sama tetapi untuk beberapa alasan justify-contentmenjadijustify-items

— WoJ

Anda dapat menggunakan flexbox untuk memusatkan teks Anda. By the way tidak perlu wadah tambahan karena teks dianggap sebagai item fleksibel anonim.

Dari spesifikasi flexbox :

Setiap anak dalam aliran dari wadah fleksibel menjadi item fleksibel , dan setiap rangkaian teks yang berdekatan yang langsung terkandung dalam wadah fleksibel dibungkus dengan item fleksibel anonim . Namun, item fleksibel anonim yang hanya berisi spasi putih (yaitu karakter yang dapat dipengaruhi oleh white-spaceproperti) tidak dirender (sama seperti jika ada display:none).

Jadi, buat saja item kisi sebagai wadah fleksibel ( display: flex), dan tambahkan align-items: centerdan justify-content: centeruntuk memusatkan secara vertikal dan horizontal.

Juga dilakukan optimasi HTML dan CSS:

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

Luaskan cuplikan

— Vadim Ovchinnikov
sumber

Jangan coba-coba menggunakan flex; tetap dengan grid css !! :)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

sedang melakukan pekerjaan pemusatan di sini.

Jika Anda ingin memusatkan sesuatu yang ada di dalam divyang ada di dalam sel grid Anda perlu mendefinisikan grid bersarang untuk membuatnya berfungsi. (Silakan lihat biola kedua contoh yang ditunjukkan di sana.)

https://css-tricks.com/snippets/css/complete-guide-grid/

Bersulang!

— Konrad Albrecht
sumber

Saya bertanya-tanya tentang grid bersarang. Terima kasih telah menunjukkan kepada saya bagaimana hal itu dilakukan, saya kira. Jadi Anda pikir flex harus dihindari dengan kisi atau tidak apa-apa untuk digabungkan?

— beetroot

Tidak apa-apa untuk digabungkan tetapi Anda harus yakin bahwa Anda menggunakan alat yang tepat untuk pekerjaan itu. Cari waktu dan saksikan presentasi Rachels, yang akan menjelaskan banyak untuk Anda dalam topik css grid. youtu.be/3vJE3bVoF-Q

— Konrad Albrecht

Masalah dengan pendekatan ini terjadi ketika Anda menggunakan batas pada item kotak ...

— Andrew

Ini dapat disingkat dengan place-self: center;.

— DevonDahon

Properti steno CSS tempat-item mengatur masing-masing properti align-items dan justify-items. Jika nilai kedua tidak disetel, nilai pertama juga digunakan untuk itu.

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

— CloudBranch
sumber

place-itemssaat ini tidak didukung di tepi

— Konrad Albrecht

Coba gunakan flex:

Demo Plunker: https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

— Younis Ar M.
sumber

-2

Kamu mau ini?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Luaskan cuplikan

— Renato siqueira
sumber

Tidak terlalu. Teks juga harus sejajar secara vertikal.

— bit

Gunakan

.text{ font-family: Raleway; font-size: large; text-align: center;  -webkit-transform: rotate(-90deg);  -moz-transform: rotate(-90deg);	  }

— Renato siqueira

-2

Saya tahu pertanyaan ini berumur beberapa tahun, tetapi saya terkejut menemukan bahwa tidak ada yang menyarankan:

   text-align: center;

ini adalah properti yang lebih universal daripada konten yang dapat dibenarkan, dan jelas tidak unik untuk kisi, tetapi saya menemukan bahwa ketika berhadapan dengan teks, yang merupakan pertanyaan khusus yang ditanyakan, bahwa hal itu menyelaraskan teks ke pusat tanpa mempengaruhi ruang antara item kisi, atau pemusatan vertikal. Ini pusat teks secara horizontal di mana berdiri pada sumbu vertikal. Saya juga menemukan itu untuk menghapus lapisan kompleksitas yang membenarkan konten dan menyelaraskan item. justify-content dan align-items mempengaruhi seluruh item kisi atau item, text-align memusatkan teks tanpa memengaruhi wadahnya. Semoga ini bisa membantu.

— Aft3rL1f3
sumber

Berpusat di CSS Grid

Struktur dan Lingkup tata letak Grid

Enam Metode untuk Pemusatan di CSS Grid

Flexbox

Tata Letak Kotak

auto margin

Properti Alignment Box

text-align: center

Pemosisian CSS

`auto` margin

`text-align: center`