Mohol by si uviesť príklad, ako pomocou CSS centrovať prvok div na stránke?

Na centrovanie prvku <div> na stránke pomocou CSS existuje niekoľko spôsobov. Jeden z najjednoduchších a najuniverzálnejších je použitie Flexbox:

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

.container {
  display: flex;
  justify-content: center; /* horizontálne */
  align-items: center;    /* vertikálne */
  height: 100vh;          /* výška kontajnera - celý displej */
}

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

A v HTML:

<div class="container">
  <div class="centered-div">Centrovaný blok</div>
</div>

Tento spôsob vyrovná vnorený blok do stredu obrazovky vertikálne aj horizontálne.

Iný spôsob je použiť absolútne pozicovanie s transformáciou:

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

Tento spôsob tiež centrova prvok vzhľadom na okno prehliadača.