CSS yordamida sahifada div elementini markazlashtirish uchun misol keltira olasizmi?

CSS yordamida sahifada <div> elementini markazlashtirish uchun bir nechta usullar mavjud. Eng oddiy va universal usullardan biri Flexboxdan foydalanish:

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

.container {
  display: flex;
  justify-content: center; /* gorizontal */
  align-items: center;    /* vertikal */
  height: 100vh;          /* konteyner balandligi - butun ekran */
}

.centered-div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

HTMLda:

<div class="container">
  <div class="centered-div">Markazlashtirilgan blok</div>
</div>

Bu usul ichki blokni ekran markaziga vertikal va gorizontal tarzda joylashtiradi.

Boshqa usul — absolyut pozitsiyalash va transformatsiya:

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: lightcoral;
}

Bu usul ham elementni brauzer oynasiga nisbatan markazlashtiradi.