Cum centrezi un div în CSS – 5 metode rapide

Publicat pe: 10 Feb 2026 | 114 vizualizări | ~2 min. lectură

Centrarea unui element în CSS este una dintre cele mai întâlnite sarcini, dar și una dintre cele care creează confuzie pentru începători. Fie că vrei să centrezi un buton, un text sau un container întreg, există mai multe metode simple și eficiente pentru a face acest lucru. În acest ghid rapid, îți prezint cele mai folosite 5 tehnici, explicate clar și cu exemple practice.

1. Centrare pe orizontală cu margin: auto

Aceasta este cea mai simplă metodă atunci când elementul are o lățime setată. Funcționează doar pe orizontală.

<div class="box">Conținut</div>

.box {
  width: 300px;
  margin: 0 auto;
  background: #eee;
}

Când o folosești: când ai un element cu lățime fixă sau maximă.

2. Centrare completă cu Flexbox

Flexbox este una dintre cele mai moderne și elegante metode pentru centrare atât pe orizontală, cât și pe verticală.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

Când o folosești: când ai nevoie de centrare perfectă în ambele direcții.

3. Centrare cu CSS Grid – cea mai scurtă metodă

CSS Grid permite centrare completă cu o singură linie de cod.

.container {
  display: grid;
  place-items: center;
}

Când o folosești: când folosești deja Grid sau vrei cea mai rapidă soluție posibilă.

4. Centrare cu text-align: center (pentru elemente inline)

Această metodă funcționează doar pentru elemente inline sau inline-block, cum ar fi imagini, iconițe sau butoane.

.parent {
  text-align: center;
}

Când o folosești: pentru elemente inline sau inline-block.

5. Centrare absolută cu transform

O metodă clasică, utilă când ai nevoie de poziționare exactă, de exemplu pentru un popup sau un mesaj de încărcare.

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Când o folosești: când vrei centrare peste un element existent.

Concluzie

Există multe moduri de a centra un div în CSS, iar metoda potrivită depinde de context. Pentru majoritatea situațiilor moderne, Flexbox și Grid sunt cele mai rapide și mai elegante soluții. Dacă ai nevoie doar de centrare orizontală, margin: auto rămâne o metodă simplă și eficientă.