3 moduri simple de a centra un element cu CSS

Cuprins

Recomandări Principale

Alinierea elementelor în design-urile web a fost mereu o provocare, dar CSS-ul modern facilitează acum poziționarea centrală.
Flexbox este cea mai frecventă metodă pentru a centra elemente, propunând un model de design adaptabil care permite o aliniere simplă.
CSS Grid și poziționarea CSS sunt, de asemenea, abordări eficiente pentru centrarea elementelor pe o pagină web, oferind control precis asupra aspectului și aliniamentului.

Centrarea unui element în structura site-ului tău web este o problemă care a dat mereu bătăi de cap designerilor. Nu a fost întotdeauna ușor de realizat, dar multe machete necesită poziționare centrală. Din fericire, CSS-ul actual oferă un suport adecvat pentru centrare.

Descoperă cum să poziționezi un div central, orizontal și vertical, utilizând Flexbox, CSS Grid și poziționarea CSS.

Un fișier HTML simplu pentru a te antrena în centrarea elementelor

Exemplele următoare folosesc toate un document HTML simplu pentru a demonstra centrarea cu CSS. Utilizează acest cod și modifică CSS-ul în funcție de fiecare secțiune pentru a vedea cum funcționează aceste proprietăți.

 <html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>

Utilizarea Flexbox pentru a centra un element Div

Este necesar să înțelegi noțiunile de bază ale Flexbox înainte de a-l utiliza pentru a centra un element div. Din fericire, Flexbox abordează problema într-un mod simplu, motiv pentru care este și cel mai des folosit. Oferă un model de aspect flexibil, care ușurează alinierea și distribuirea spațiului între elementele dintr-un container, fiind perfect pentru centrarea elementelor.

Utilizează următorul CSS pentru a obține centrarea cu Flexbox.

Înconjoară elementul div într-un container. Aplică proprietatea display: flex pe container pentru a activa modul Flexbox. Într-un test simplu, corpul poate servi drept container:
```
 body {
display: flex;
} 
```
Folosește proprietățile justify-content și align-items pentru a alinia elementele de-a lungul axei principale (orizontală), respectiv axei transversale (verticală). Pentru a centra pe ambele axe, setează aceste proprietăți la center. Pentru o demonstrație simplă, ar trebui să setezi și înălțimea corpului la 100vh, pentru a vedea efectul alinierii verticale.
```
 body {
justify-content: center;
align-items: center;
} 
```
Atribuie div-ului o culoare de fundal pentru a vizualiza poziția sa pe pagina finală:
```
 div { background-color: red; } 
```

Verificând rezultatul în Google Chrome DevTools, poți observa cum cele două proprietăți controlează alinierea pe fiecare axă:

Utilizarea CSS Grid pentru a centra un element Div

Utilizarea CSS Grid pentru a centra un element este o altă metodă eficientă, oferind un control exact asupra aspectului și aliniamentului.

Definește un container pentru designul tău și aplică stilul display: grid pentru a activa CSS Grid. În acest caz, corpul servește drept container.
```
 body {
display: grid;
} 
```
Utilizează proprietățile grid-template-columns și grid-template-rows pentru a defini structura grilei tale. Pentru centrare, o singură coloană și un rând vor fi suficiente, așadar folosește 1fr pentru ambele.
```
 body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
} 
```
Utilizează proprietatea place-items pentru a centra conținutul grilei, atât pe orizontală, cât și pe verticală.
```
 body {
place-items: center;
} 
```
Stilizează fundalul elementului div pentru a-l vizualiza în centrul containerului grilă.
```
 div {
background-color: blue;
} 
```

În acest caz, o singură proprietate controlează poziționarea centrală a div-ului pe pagină:

Utilizarea poziționării CSS pentru a centra un element Div

Pentru a folosi proprietatea de poziție CSS pentru a centra un div, este necesar să înțelegi și cum funcționează transformările CSS cu tranziții. Iată un ghid pas cu pas cu un exemplu.

Pentru a poziționa elementul div, asigură-te că elementul său container are o poziție relativă. Aceasta stabilește un context de poziționare relativă, astfel încât să poți plasa div-ul în centrul containerului său.
```
 body {
position: relative;
} 
```
Aplică poziționarea absolută elementului div, apoi utilizează proprietățile top și left pentru a poziționa colțul din stânga sus al div-ului exact în centrul containerului său.
```
 div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
} 
```
Transformarea translate(-50%, -50%) mută div-ul spre stânga și în sus cu jumătate din lățime și jumătate din înălțime.

Această metodă funcționează prin centrarea inițială a colțului de sus al elementului, apoi deplasându-l relativ cu jumătate din lățime și jumătate din înălțime.

Flexbox, CSS Grid și poziționarea CSS sunt instrumente puternice pe care le poți folosi pentru a centra elementele pe o pagină web. Cu Flexbox, poți centra atât pe orizontală, cât și pe verticală cu câteva linii de cod. CSS Grid oferă o aliniere puternică în două dimensiuni, iar poziționarea CSS îți permite să centrezi un element în raport cu elementul său părinte.

Folosind aceste tehnici, te poți asigura că paginile tale web arată îngrijit și profesionist.