3 moduri simple de a centra un element cu CSS

de
Tweet
Share
Share
Pin

Recomandări cheie

  • Centrarea elementelor în layout-urile web a fost întotdeauna o provocare, dar CSS modern acceptă acum o poziționare centrală ușoară.
  • Flexbox este metoda cea mai utilizată pentru centrarea elementelor, oferind un model de layout flexibil care permite o aliniere ușoară.
  • Grila CSS și poziționarea CSS sunt, de asemenea, metode eficiente de centrare a elementelor pe o pagină web, oferind control precis asupra aspectului și alinierii.

Centrarea unui element în aspectul dvs. web este o provocare care i-a frustrat întotdeauna pe designeri. Nu a fost întotdeauna ușor de realizat, dar multe modele necesită poziționare centrală. Din fericire, CSS modern are acum un suport bun pentru centrare.

Aflați cum să centrați un div orizontal și vertical folosind Flexbox, CSS Grid și poziționarea CSS.

Un fișier HTML simplu pentru a exersa centrarea

Următoarele exemple folosesc toate un document HTML minim pentru a demonstra centrarea cu CSS. Utilizați acest marcaj și variați CSS-ul în funcție de fiecare secțiune pentru a vedea cum se comportă aceste proprietăți.

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

Folosind Flexbox pentru a centra un element Div

Va trebui să înțelegeți elementele de bază ale Flexbox înainte de a-l folosi pentru a centra un element div. Din fericire, Flexbox urmează o abordare simplă, motiv pentru care este cea mai utilizată. Oferă un model de aspect flexibil care facilitează alinierea și distribuirea spațiului între articolele dintr-un container, făcându-l ideal pentru centrarea elementelor.

  Activați un buton de sunet nativ pentru filele Chrome

Utilizați următorul CSS pentru a realiza centrarea cu Flexbox.

  • Înfășurați elementul div într-un container. Aplicați proprietatea display: flex pe container pentru a activa aspectul Flexbox. Într-un caz de testare simplu, corpul poate servi drept container: 
     body {
      display: flex;
    }
  • Utilizați proprietățile justify-content și align-items pentru a alinia articolele de-a lungul axei principale (orizontală) și, respectiv, a axei transversale (verticală). Pentru a centra ambele axe, setați aceste proprietăți la centru. Pentru o demonstrație simplă, ar trebui să setați și înălțimea corpului la 100vh, astfel încât să puteți vedea efectul alinierii verticale. 
     body {
      justify-content: center;
      align-items: center;
    }
  • Dați div-ului o culoare de fundal pentru a-și vizualiza plasarea pe pagina finală: 
     div { background-color: red; }

    • Vizând rezultatul în Google Chrome DevTools, puteți vedea cum cele două proprietăți controlează alinierea de-a lungul fiecărei axe:

    Utilizarea CSS Grid pentru a centra un element Div

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

  • Definiți un container pentru aspectul dvs. și aplicați stilul de afișare: grilă pentru a activa Grila CSS. În acest caz, corpul servește drept container. 
     body {
      display: grid;
    }
  • Utilizați proprietățile grid-template-columns și grid-template-rows pentru a defini structura grilei dvs. Pentru centrare, o singură coloană și rând vor fi suficiente, așa că folosiți 1fr pentru ambele. 
     body {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }
  • Utilizați proprietatea place-items pentru a centra conținutul grilei, atât pe orizontală, cât și pe verticală. 
     body {
      place-items: center;
    }
  • Stilați fundalul elementului dvs. div pentru a-l vizualiza în centrul containerului grilă. 
     div {
      background-color: blue;
    }

    • În acest caz, o singură proprietate controlează plasarea centrală a div-ului pe pagina dvs.:

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

    Pentru a utiliza proprietatea de poziție CSS pentru a centra un div, trebuie, de asemenea, să înțelegeți cum funcționează transformările CSS cu tranziții. Iată un ghid pas cu pas cu un exemplu.

      Cum să utilizați AirTags: un ghid complet
  • Pentru a poziționa elementul div, asigurați-vă că containerul său are o poziție relativă. Aceasta stabilește un context de poziționare relativă, astfel încât să puteți plasa div-ul în centrul containerului său. 
     body {
      position: relative;
    }
  • Aplicați poziționarea absolută elementului div, apoi utilizați proprietățile de sus și stânga 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 întâi a colțului de sus al elementului, apoi mișcându-l relativ la 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 puteți folosi pentru a centra elementele pe o pagină web. Cu Flexbox, puteți centra atât pe orizontală, cât și pe verticală cu doar câteva linii de cod. Grila CSS oferă o aliniere puternică în două dimensiuni și puteți utiliza poziționarea CSS pentru a centra un element în raport cu containerul său părinte.

    Cu aceste tehnici, vă puteți asigura că paginile dvs. web arată curat și profesionist.