Centriranje elemenata na sredinu zaslona: praktičan vodič za početnike

U suvremenom razvoju web stranica često je potrebno postaviti elemente točno na sredinu zaslona, bilo horizontalno, vertikalno ili oboje. Bez obzira na to radi li se o login obrascu, poruci ili grafičkom elementu, pravilno centriranje poboljšava preglednost i interakciju korisnika. U ovom ćemo vodiču objasniti najpouzdanije načine kako to postići uz CSS, na jednostavan i razumljiv način.

Uvod

Centriranje elemenata može biti zahtjevnije nego što zvuči, jer različiti pregledi i uređaji mijenjaju širine i visine prostora. U praksi često je potrebno centrirati element neovisno o njegovoj širini ili visini. Sljedeći koraci opisuju kako postaviti element fiksne širine i odgovarajuće visine te ga učiniti vizualno centriranim unutar prostora stranice ili unutar roditeljskog kontejnera.

Horizontalno centriranje

Za horizontalno centriranje dovoljno je postaviti širinu elementa i koristiti automatsko margine s obje strane. Time element dobiva jednaki razmak s lijeve i s desne strane te se nalazi točno na sredini.

#login-box { width: 350px; margin-left: auto; margin-right: auto; }

Ova se tehnika primjenjuje kada je širina elementa poznata i nema potrebe za određenim prilagodbama visine prozora. Rezultat je centriranje samo horizontalno, bez promjene vertikalnog položaja.

Vertikalno centriranje

Vertikalno centriranje često zahtijeva drugačiji pristup, jer visina prozora nije uvijek predvidiva. U osnovi se može koristiti postavljanje elementa na sredinu stranice uz pomoć kombinacije postavki i pomaka.

#login-box { height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; }

Ova metoda označava elementu da bude smješten na sredinu koordinatnog sustava stranice. Ipak, važno je razumjeti da je ovo rješenje osjetljivo na promjene veličine prozora i nije idealno za dinamične sadržaje.

Kombinirano centriranje

Najizravniji način da element bude centriran i horizontalno i vertikalno je korištenje kombinacije prilagođenih tehnika ili, modernije, fleksibilnog rasporeda ili mreže.

Primjer 1: pomoću transformacije i položaja:

#login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; }

Ova metoda ne ovisi o fiksnim vrijednostima margina, već pomicanjem elementa za pola vlastite širine i visine postiže se stabilno centriranje na zaslonu.

Primjer 2: korištenje fleksibilnog rasporeda (flexbox):

body, .stranica {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
login-box { width: 320px; }

Fleksibilni okvir omogućuje kako horizontalno, tako i vertikalno centriranje, a istovremeno ostavlja dovoljno prostora za druge elemente na istoj stranici ili unutar roditeljskog kontejnera.

Primjer 3: mreža (grid) za centriranje na isti način:

.kontejner { display: grid; place-items: center; min-height: 100vh; }

Uz grid centriranje je iznimno jednostavno — element se nalazi točno u sredini bez dodatnih prilagodbi.

Praktični savjeti i najčešće pogreške

• Uvijek provjerite koliko prostora zauzima sadržaj koji centrirate. Ako dragocjeni sadržaj raste, provjerite je li centriranje i dalje estetski prihvatljivo na svim uređajima.
• Na mobilnim uređajima pripazite na visinu prozora. Ponekad je bolje koristiti fleksibilni raspored i prilagoditi visinu sadržaja na temelju sadržaja.
• Ako centrirate element s fiksnom širinom, os