Vai vari sniegt piemēru, kā ar CSS var centrēt div elementu lapā?

Lai centrētu <div> elementu lapā ar CSS, ir vairākas metodes. Viena no vienkāršākajām un universālākajām ir izmantot Flexbox:

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

.container {
  display: flex;
  justify-content: center; /* horizontāli */
  align-items: center;    /* vertikāli */
  height: 100vh;          /* konteinera augstums - visa ekrāna */
}

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

HTML:

<div class="container">
  <div class="centered-div">Centrēts bloks</div>
</div>

Šī metode novieto iekšējo bloku ekrāna centrā gan vertikāli, gan horizontāli.

Vēl viena metode ir izmantot absolūto pozicionēšanu ar transformāciju:

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

Šī metode arī centrē elementu attiecībā pret pārlūkprogrammas logu.