13 moduri de centru vertical

înapoi în vremurile bune, limitele CSS au fost de așa natură încât chiar și lucruri „simple”, cum ar fi centrarea verticală a reprezentat o provocare, cu unii dintre noi chiar bazându-se pe soluții JavaScript. A fost fragil, a fost foarte constrâns și a existat întotdeauna o singură excepție care a făcut-o să eșueze.

fie că încercam să aliniem o pictogramă sau o imagine lângă text, să creăm unul dintre acele bannere populare „erou” sau o suprapunere modală, centrarea lucrurilor pe axa verticală a fost întotdeauna o luptă.dar CSS a parcurs un drum lung de atunci, oferind o mulțime de metode care au făcut centrarea verticală mai ușoară de fiecare dată. Iată un rezumat al unora dintre ele, împreună cu cazurile și limitările lor de utilizare.

poziționare absolută și marjă auto

un element fără Dimensiune intrinsecă poate fi „centrat” folosind pur și simplu valori egale de sus și de jos. Atunci când elementul are dimensiuni intrinseci am putea folosi 0 pentru partea de sus și de jos, apoi se aplică marja auto. Aceasta va centra automat elementul:

.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}

vezi stiloul
Centrarea 1: poziționarea absolută de Facundo Corradini (@facundocorradini)
pe CodePen.

limitarea este, desigur, că înălțimea elementului trebuie declarată în mod explicit, sau va ocupa întregul container.

clasic top 50% traduce -50%

aceasta este una dintre primele, și încă un du-te-la, pentru mulți dezvoltatori. Un truc simplu, bazându-se pe poziționarea absolută elementul interior la 50% din partea de sus a Mamă lor, apoi traducerea-l în sus 50% din înălțimea sa:

.container{ position: relative;}.element{ position: absolute; top: 50%; transform: translateY(-50%);}

a se vedea Pen-ul
centrare 2: top 50 translateY -50 de Facundo Corradini (@facundocorradini)
pe CodePen.

o abordare destul de solidă, singura limitare majoră fiind utilizarea traducerii care ar putea împiedica alte transformări, de exemplu atunci când se aplică tranziții / animații.

tabele. Da, tocmai am spus tabele.

o abordare foarte simplă și una dintre primele (înapoi în ziua, totul a fost tabele), este folosind comportamentul celulelor de masă și vertical-alinia la centrul unui element de pe container.

Acest lucru se poate face cu tabele reale (rușine, rușine, rușine), sau folosind HTML semantic, comutarea afișarea elementului la table-cell:

.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}

a se vedea Pen-ul
Centrarea 3: tabele de Facundo Corradini (@facundocorradini)
pe CodePen.

Acest lucru funcționează chiar și atunci când ambele elemente sunt de înălțime necunoscută. Limitarea majoră este, desigur, dacă trebuie să aveți un frate necentrat și s-ar putea să fie dificil cu limitele de fundal.

de asemenea, rețineți că acest lucru eșuează total pe cititoarele de ecran (chiar dacă marcajul dvs. se bazează pe divs, setarea afișajului CSS la tabel și table-cell va face cititoarele de ecran să îl interpreteze ca un tabel real). Departe de cele mai bune atunci când vine vorba de accesibilitate.

metoda elementului fantomă

Un alt oldie, care nu a prins din orice motiv, folosește blocul inline cu un element fantomă (pseudo) care are înălțimea 100% a părintelui, apoi setând proprietatea de aliniere verticală la mijloc:

.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}

vezi stiloul
Centrarea 4: metoda elementului fantomă prin Facundo Corradini (@facundocorradini)
pe CodePen.

de fapt, funcționează destul de bine, cea mai vizibilă „te-am prins” fiind că mișcă centrul orizontal doar un pic spre dreapta, din cauza comportamentului întotdeauna cringy al spațiului alb dintre elementele blocului inline.

Acest lucru poate fi tratat așa cum am face cu problema inline-block în orice alt context, cea mai simplă abordare fiind margin-left-1ch pe care am folosit-o mai sus (deși acest lucru nu va fi 100% precis, cu excepția fonturilor monospace, deoarece unitatea ch înseamnă lățimea caracterului „0”) sau setarea dimensiunii fontului la 0 pe container, apoi resetarea acestuia la px sau rem pe element. Nu este optim, cel puțin.

Margin auto pe un flex-item

în cele din urmă intra pe teritoriul CSS moderne, flexbox a introdus un comportament destul de minunat pentru marjele auto. Acum, nu numai că va centra orizontal elementul așa cum a făcut-o în machete de blocuri, dar îl va centra și pe axa verticală:

.container{ display:flex;}.element{ margin:auto;}

vedeți pixul
Centrarea 5: margin:auto pe un element flex de Facundo Corradini (@facundocorradini)
pe CodePen.

această tactică este una dintre preferatele mele datorită simplității sale, singura limitare majoră este că va funcționa doar cu un singur element.

Pseudo-elemente pe un flex-container

nu este abordarea cea mai practică din lume, dar putem folosi, de asemenea, flexibile, goale pseudo elemente pentru a împinge elementul la centru:

.container{ display:flex;}.element{ margin:auto;}

a se vedea Pen
centrare 6: pseudos pe un flexbox de Facundo Corradini (@facundocorradini)
pe codepen.

acest lucru poate fi util atunci când dorim să păstrăm o spațiere flexibilă pe un container flexibil orientat pe coloană cu mai multe elemente.

7& 8. Aliniați pe flex-container sau flex-element

Flexbox introdus, de asemenea, proprietăți de aliniere foarte mare (care sunt acum bifurcat în propriul modul de aliniere cutie). Acest lucru ne permite să controlăm modul în care sunt plasate elementele și modul în care spațiul gol este distribuit în moduri care ar fi necesitat fie numere magice în CSS pentru un anumit număr de elemente (fie un JS destul de inteligent pentru sume dinamice).

în funcție de direcția flexibilă, putem folosi justify-content sau align-items pentru a ajusta după cum este necesar.

pe container:

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

a se vedea Pen-ul
centrare 7: aliniați pe flex-container de Facundo Corradini (@facundocorradini)
pe CodePen.

pe un anumit flex-element:

.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}

a se vedea Pen-ul
centrare 8: align on flex-element de Facundo Corradini (@facundocorradini)
pe CodePen.

nu multe dezavantaje la acest lucru, cu excepția cazului în care aveți nevoie pentru a sprijini browsere mai vechi. IE 11 ar trebui să funcționeze, dar implementarea flexbox este destul de buggy, deci ar trebui tratată întotdeauna cu grijă suplimentară. IE 10 necesită o muncă suplimentară, deoarece se bazează pe un proiect mai vechi, timpuriu al specificației, care are o sintaxă diferită și necesită prefixul-ms vendor.

9 & 10. Alinierea pe grid-container sau grid-element

grila CSS include destul de mult aceleași opțiuni de aliniere ca flexbox, astfel încât să putem folosi pe grid-container:

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

a se vedea Pen
centrare 9: align pe grid-container de Facundo Corradini (@facundocorradini)
Cod.

sau doar pe un anumit element de grilă:

.container{ display: grid;}.element{ justify-self: center; align-self: center}

lipsa suportului de browser vechi este singura limitare pentru această tehnică.

a se vedea Pen-ul
centrare 10: aliniați pe grilă-element de Facundo Corradini (@facundocorradini)
pe CodePen.

Pseudo-elemente pe o grilă

similar cu alternativa flexbox, am putea folosi o grilă cu trei rânduri cu pseudo-elemente:

.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}

amintiți-vă că 1FR înseamnă de fapt minmax(auto, 1FR), astfel încât rândurile goale nu vor lua neapărat o treime din înălțimea containerului. Ei se vor prăbuși după cum este necesar tot drumul până la valoarea lor minimă de auto, și fără conținut, înseamnă 0.

a se vedea Pen-ul
centrare 11 : grid + pseudos de Facundo Corradini (@facundocorradini)
pe CodePen.

aceasta ar putea părea o abordare prostească, dar ne permite să scoatem cu ușurință unul dintre trucurile mele preferate de grilă CSS: combinarea rândurilor fr cu cele minmax, ceea ce va face ca cele fr goale să se prăbușească mai întâi, apoi cele mixmax. Jenn Simmons are exemple minunate în acest sens.

deci, având pseudo-urile să ia rândurile complet pliabile, va permite algoritmului de plasare automată să-și lucreze magia asupra elementelor noastre reale. Cu excepția cazului în care avem nevoie pentru a sprijini IE, care nu are auto-plasare. Ceea ce ne conduce la următoarea metodă…

plasarea explicită a rândului de grilă

grila CSS permite plasarea explicită a elementelor pe un anumit rând, astfel încât aceeași declarație de grilă ca mai sus și elementul plasat pe al doilea rând vor fi suficiente:

.container{ display:grid; grid-template-columns:1fr; grid-template-rows: repeat(3, 1fr);}.element{ grid-row: 2 / span 1; /* or grid-row: 2/3 */}

acesta poate funcționa până la IE10. Credeți sau nu, IE a fost unul dintre primii și mai puternici susținători ai CSS grid, livrându-l până în 2011 cu IE10. Se bazează pe un proiect foarte devreme, care are o sintaxă complet diferită, dar putem face să funcționeze:

.container{ display: -ms-grid; -ms-grid-rows: (1fr); -ms-grid-columns: 1fr;}.element{ -ms-grid-column: 1; -ms-grid-row: 2;}

a se vedea Pen-ul
centrare 12 : plasarea explicită pe o grilă de Facundo Corradini (@facundocorradini)
pe CodePen.

Margin auto pe un element grilă

similar cu flexbox, aplicarea margin-auto pe un element grilă îl centrează pe ambele axe.

.container{ display: grid;}.element{ margin: auto;}

vezi Pen-ul
centrare 12 : plasarea explicită pe o grilă de Facundo Corradini (@facundocorradini)
pe CodePen.

unele implementări viitoare (probabile)

Conform specificației CSS Box Alignment Module level 3, align-content ar trebui să funcționeze pe axa bloc a containerelor bloc și a containerelor multicol, deci (dacă browserele îl implementează) ar trebui să putem centra conținutul acestor containere la fel ca în containerele flex sau grid.

concluzie