Маслиҳат диҳед, ки чӣ гуна бо CSS метавон як унсури div-ро дар саҳифа марказонид?

Барои марказонидани унсури <div> дар саҳифа бо истифода аз CSS, чанд роҳ вуҷуд дорад. Яке аз соддатарин ва универсалӣ истифодаи Flexbox аст:

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

.container {
  display: flex;
  justify-content: center; /* дар самти уфуқӣ */
  align-items: center;    /* дар самти амудӣ */
  height: 100vh;          /* баландии контейнер - тамоми экран */
}

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

Ва дар HTML:

<div class="container">
  <div class="centered-div">Блок марказонидашуда</div>
</div>

Ин усул блоки дохилиро дар маркази экран ҳам амудӣ ва ҳам уфуқӣ ҷойгир мекунад.

Роҳи дигар истифодаи ҷойгиркунии абсолютӣ бо трансформатсия:

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

Ин усул ҳамчунин унсурро нисбати тирезаи браузер марказ мекунад.