Penting membuat konten pada css secara center memang tidak mudah, baik itu secara horizontal maupun vertical.

Mungkin kalau center secara Horizontal tidak begitu sulit seperti :

Jika itu inline-element kita bisa menggunakan text-align:center;

center {
    text-align: center;
}

Atau jika itu block level element kita bisa menggunakan margin:0 auto;

center {
    margin: 0 auto;
}

Kedua hal ini dapat menjadi solusi center secara horizontal.

Namun bagaimana jika centering secara vertikal?

Center vertikal memang agak sedikit lebih sulit daripada center secara horizontal. Terdapat beberapa cara yang bisa dilakukan, namun disini kita mau coba 2 cara yaitu dengan flexbox dan dengan grid.

Flexbox

Pada flexbox kita bisa mengatur align-items dan flex-align secara center:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

Grid

Untuk Grid kita bisa mengatur place-items box menjadi center:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Semoga bermanfaat, Sekian. Terimakasih :sunglasses: :sunglasses: