Tudnál példát mondani arra, hogyan lehet CSS segítségével középre helyezni egy div elemet az oldalon?

A CSS segítségével a <div> elem középre helyezéséhez több módszer is létezik. Az egyik legegyszerűbb és leguniverzálisabb a Flexbox használata:

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

.container {
  display: flex;
  justify-content: center; /* vízszintesen */
  align-items: center;    /* függőlegesen */
  height: 100vh;          /* a tartály magassága - az egész képernyő */
}

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

És HTML-ben:

<div class="container">
  <div class="centered-div">Középre helyezett blokk</div>
</div>

Ez a módszer a beágyazott blokkot a képernyő közepére igazítja mind függőlegesen, mind vízszintesen.

Egy másik módszer az abszolút pozícionálás és transzformáció használata:

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

Ez a módszer szintén középre helyezi az elemet a böngészőablakhoz képest.