Cum să centrați orice cu CSS – Aliniați un Div, Text și multe altele

Centrarea lucrurilor este unul dintre cele mai dificile aspecte ale CSS.

Metodele în sine nu sunt de obicei greu de înțeles. În schimb, se datorează mai mult faptului că există atât de multe modalități de a centra lucrurile.

Metoda pe care o utilizați poate varia în funcție de elementul HTML pe care încercați să îl centrați sau dacă îl centrați orizontal sau vertical.

În acest tutorial, vom trece în revistă modul de centrare a diferitelor elemente orizontal, vertical și atât vertical, cât și orizontal.

Cum se centrează orizontal

Centrarea elementelor pe orizontală este în general mai ușoară decât centrarea pe verticală a acestora. Iată câteva elemente comune pe care poate doriți să le centrați pe orizontală și diferite moduri de a face acest lucru.

Cum se centrează textul cu proprietatea CSS Text-Align Center

Pentru a centra textul sau linkurile pe orizontală, utilizați doar text-align proprietate cu valoarea center:

<div class="container">
  <p>Hello, (centered) World!</p>
</div>

p {
  text-align: center;
}

Cum se centrează o divizare cu CSS Margin Auto

Folosiți stenograma margin proprietate cu valoarea 0 auto pentru a centra elemente la nivel de bloc, cum ar fi a div orizontal:

<div class="container">
  <div class="child"></div>
</div>

.child {
  ...
  margin: 0 auto;
}

Cum se centrează un Div orizontal cu Flexbox

Flexbox este cel mai modern mod de a centra lucrurile pe pagină și face proiectarea de aspecte receptive mult mai ușoară decât era. Cu toate acestea, nu este pe deplin acceptat în unele browsere vechi, cum ar fi Internet Explorer.

Pentru a centra un element pe orizontală cu Flexbox, trebuie doar să aplicați display: flex și justify-content: center la elementul părinte:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  display: flex;
  justify-content: center;
}

Cum se centrează vertical

Centrarea elementelor pe verticală fără metode moderne precum Flexbox poate fi o adevărată corvoadă. Aici vom trece în revistă câteva dintre metodele mai vechi pentru a centra mai întâi lucrurile pe verticală, apoi vă vom arăta cum să o faceți cu Flexbox.

Cum se centrează vertical o divizare cu poziționare absolută CSS și margini negative

Pentru o lungă perioadă de timp aceasta a fost modalitatea de a merge în centru pentru a centra lucrurile pe verticală. Pentru această metodă trebuie să cunoașteți înălțimea elementului pe care doriți să îl centrați.

Mai întâi, setați display proprietatea elementului părinte pentru relative.

Apoi pentru elementul copil, setați display proprietate pentru absolute și top la 50%:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
}

Dar asta chiar centrează vertical marginea superioară a elementului copil.

Pentru a centra cu adevărat elementul copil, setați margin-top proprietate pentru -(half the child element's height):

.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* half this element's height */
}

Cum se centrează un Div pe verticală cu Transformare și Traducere

Dacă nu cunoașteți înălțimea elementului pe care doriți să îl centrați (sau chiar dacă știți), această metodă este un truc ingenios.

Această metodă este foarte similară cu metoda marjelor negative de mai sus. Seteaza display proprietatea elementului părinte pentru relative.

Pentru elementul copil, setați display proprietate pentru absolute și set top la 50%. Acum, în loc să utilizați o marjă negativă pentru a centra cu adevărat elementul copil, utilizați doar transform: translate(0, -50%):

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  position: relative;
}

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

Rețineți că translate(0, -50%) este stenogramă pentru translateX(0) și translateY(-50%). De asemenea, ai putea scrie transform: translateY(-50%) pentru a centra elementul copil pe verticală.

Cum se centrează vertical o divizare cu Flexbox

La fel ca centrarea lucrurilor pe orizontală, Flexbox face foarte ușor centrarea lucrurilor pe verticală.

Pentru a centra un element vertical, aplicați display: flex și align-items: center la elementul părinte:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  display: flex;
  align-items: center;
}

Cum se centrează atât pe verticală, cât și pe orizontală

Cum se centrează o divizare verticală și orizontală cu poziționare absolută CSS și margini negative

Acest lucru este foarte similar cu metoda de mai sus pentru a centra un element pe verticală. La fel ca data trecută, trebuie să cunoașteți lățimea și înălțimea elementului pe care doriți să îl centrați.

Seteaza display proprietatea elementului părinte pentru relative.

Apoi puneți copilul display proprietate pentru absolute, top la 50%, și left la 50%. Aceasta centrează doar colțul din stânga sus al elementului copil pe verticală și orizontală.

Pentru a centra cu adevărat elementul copil, aplicați o marjă superioară negativă setată la jumătate din înălțimea elementului copil și o marjă stângă negativă setată la jumătate din lățimea elementului copil:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
}

Cum se centrează un Div pe verticală și pe orizontală cu Transformare și Traducere

Utilizați această metodă pentru a centra un element pe verticală și orizontală dacă nu îi cunoașteți dimensiunile exacte și nu puteți utiliza Flexbox.

Mai întâi, setați display proprietatea elementului părinte pentru relative.

Apoi, setați elementul copil display proprietate pentru absolute, top la 50%, și left la 50%.

În cele din urmă, utilizați transform: translate(-50%, -50%) pentru a centra cu adevărat elementul copil:

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  position: relative;
}

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

Cum se centrează un Div pe verticală și pe orizontală cu Flexbox

Flexbox este cel mai simplu mod de a centra un element atât pe verticală, cât și pe orizontală.

Aceasta este într-adevăr doar o combinație a celor două metode Flexbox anterioare. Apoi aplică justify-content: center și align-items: center pentru a centra elementele copilului orizontal și vertical:

<div class="container">
  <div class="child"></div>
</div>

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

Asta este tot ce trebuie să știi pentru a te concentra pe cei mai buni dintre ei. Acum mergeți mai departe și centrați toate lucrurile.