Alinierea elementelor HTML. Un ghid complet pentru centrarea unui element DIV

#copil (înălțimea liniei: 200px; )

Această metodă funcționează în toate browserele, dar nu uitați că ar trebui folosită pentru o linie de text. Dacă textul dvs. se întinde pe mai mult de un rând, utilizați o metodă diferită. Valoarea proprietății line-height poate fi orice, dar nu mai mică decât înălțimea fontului. În practică, această metodă funcționează excelent pentru centrarea unui meniu orizontal.

Metoda CSS folosind proprietățile tabelului

După cum am scris deja, conținutul unei celule poate fi centrat folosind proprietatea CSS vertical-align. Elementul părinte trebuie să fie reprezentat ca un tabel, elementul copil trebuie desemnat ca o celulă și proprietatea vertical-align trebuie să fie aplicată acestuia cu valoarea middle . În acest fel, orice conținut din elementul copil va fi centrat vertical. Codul CSS este dat mai jos.

#parent (afișare: tabel;) #copil (afișare: tabel-celulă; vertical-align: mijloc; )

Din păcate, această metodă nu funcționează în versiunile mai vechi ale browserului IE. Dacă aveți nevoie de suport pentru browser pentru IE6 și mai jos, adăugați o declarație display: inline-block la elementul copil.

#copil (afisare: inline-block; )

Poziționare absolută și marjă negativă

Această metodă este concepută pentru elemente la nivel de bloc și funcționează în toate browserele. Trebuie să setați înălțimea elementului care trebuie centrat.

Mai jos este codul în care elementul copil este centrat folosind această metodă.

#părinte (poziție: relativ;) #copil (poziția: absolut; sus: 50%; stânga: 50%; înălțime: 30%; lățime: 50%; marjă: -15% 0 0 -25%; )

Mai întâi trebuie să poziționați elementele părinte și copil. Apoi setăm offset-ul elementului copil la 50% față de partea de sus și stânga a elementului părinte, centrând astfel elementul copil față de elementul părinte. Cu toate acestea, manipulările noastre vor centra colțul din dreapta sus al elementului copil în centrul elementului părinte, ceea ce, desigur, nu ni se potrivește.

Sarcina noastră: să mutăm elementul copil în sus și la stânga, în raport cu elementul părinte, astfel încât elementul copil să fie centrat vizual vertical și orizontal. Acesta este motivul pentru care trebuie să cunoașteți înălțimea și lățimea elementului copil.

Deci, ar trebui să dăm elementului copil o marjă de sus și stânga negativă egală cu jumătate, respectiv, lățimea și înălțimea elementului copil.

Spre deosebire de primele două metode, această metodă este destinată elementelor la nivel de bloc. Metoda funcționează în toate browserele, dar conținutul poate depăși înălțimea elementului părinte și se poate extinde dincolo de limitele acestuia. Această metodă funcționează cel mai bine atunci când înălțimea și lățimea elementelor sunt fixe.

Poziționarea absolută a unui element copil

Ca și în metoda anterioară, elementele părinte și copil sunt poziționate relativ și, respectiv, absolut.

În codul CSS centrez elementul copil atât pe verticală, cât și pe orizontală, totuși puteți utiliza doar centrarea verticală.

#părinte (poziție: relativă;) #copil (poziția: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; lățime: 50%; înălțime: 30%; margine: auto; )

Ideea acestei metode este că puteți poziționa un element copil folosind valorile proprietăților de sus, stânga, dreapta, jos egale cu 0. Deoarece elementul nostru copil este mai mic decât elementul părinte, nu se va putea „lipi”. ” la elementul părinte.

Valorile marjei pentru toate cele patru laturi ale elementului copil sunt zero, ceea ce centrează elementul vertical în raport cu părintele. Din păcate, această metodă are aceleași dezavantaje ca și metoda anterioară: este necesară fixarea înălțimii și lățimii copilului, lipsa suportului pentru browserele IE mai vechi.

Marginile de jos și de sus sunt egale

În această metodă, atribuim în mod explicit o umplutură egală (jos și sus) elementului părinte, care centrează vizual elementul copil pe verticală.

#părinte ( umplutură: 5% 0; ) #copil ( umplutură: 10% 0; )

Folosesc dimensiuni relative. Dacă dimensiunile blocurilor sunt fixe, atunci va trebui să faceți niște calcule matematice.

De exemplu, dacă elementul părinte are o înălțime de 400 px, iar copilul are 100 px, atunci ar trebui să setați umplutura de sus și de jos la 150 px.

150 + 150 + 100 = 400

div plutitor

Această metodă implică un bloc flotant gol care controlează poziția verticală a elementului copil. Div-ul plutitor trebuie plasat înaintea elementului copil, vezi codul HTML de mai jos.

#părinte (înălțime: 250px;) #floater ( plutitor: stânga; înălțime: 50%; lățime: 100%; margine-jos: -50px; ) #copil (clar: ambele; înălțime: 100px; )

Mai întâi mutăm caseta plutitoare la stânga (sau la dreapta) și îi dăm o înălțime de 50% din părintele ei. În acest fel, blocul plutitor va umple jumătatea superioară a elementului părinte.

Deoarece blocul este plutitor, este eliminat din fluxul general al documentului, prin urmare, blocului copil ar trebui să i se atribuie proprietatea clear cu valoarea ambelor . Am setat valoarea la ambele, dar puteți utiliza o valoare care se potrivește cu direcția de poziționare a elementului plutitor.

În prezent, marginea superioară a elementului copil se află direct sub marginea inferioară a elementului plutitor. Trebuie să ridicăm elementul copil la jumătate din înălțimea elementului plutitor. Pentru a face acest lucru, trebuie doar să setați marja inferioară negativă pentru blocul flotant la 50%.

Funcționează în toate browserele. Dezavantajul acestei metode este că necesită un bloc gol și necesită cunoașterea înălțimii elementului copil.

Aliniați textul vertical în CSS- o muncă foarte grea. Am văzut destui oameni care se luptă cu asta, încât continui să găsesc erori „critice” atunci când vine vorba de design responsive real.

Dar nu vă temeți: dacă vă luptați deja cu alinierea verticală CSS, ați ajuns la locul potrivit.

Să vorbim despre proprietatea de aliniere verticală CSS

Când am început să lucrez în dezvoltarea web, m-am luptat puțin cu această proprietate. M-am gândit că ar trebui să funcționeze ca o proprietate clasică" alinierea textului" Oh, dacă totul ar fi atât de simplu...

proprietatea CSS de aliniere verticală funcționează excelent cu tabele, dar nu cu div-uri sau alte elemente. Când îl utilizați pe un div, acesta aliniază elementul în raport cu alte div-uri, dar nu și conținutul său. În acest caz, proprietatea funcționează numai cu afișarea: inline-block; .

Vezi exemplu

Vrem să concentrăm conținutul, nu div-ul în sine!

Aveți două opțiuni. Dacă aveți doar elemente div cu text, atunci puteți utiliza proprietatea line-height. Aceasta înseamnă că trebuie să cunoașteți înălțimea elementului, dar nu o puteți seta. În acest fel, textul tău va fi întotdeauna în centru.

Adevărul despre această abordare Alinierea verticală CSS exista un dezavantaj. Dacă textul are mai multe linii, atunci înălțimea liniei va fi înmulțită cu numărul de linii. Cel mai probabil, în acest caz, vei ajunge cu o pagină teribil de aranjată.

Aruncă o privire la acest exemplu

Dacă conținutul pe care doriți să îl centrați constă din mai multe rânduri, atunci este mai bine să utilizați div-urile de tabel. Puteți folosi și tabele, dar acest lucru nu este corect din punct de vedere semantic. Dacă aveți nevoie de pauze în scopuri receptive, este mai bine să utilizați elemente div.

Pentru ca acest lucru să funcționeze, trebuie să existe un container părinte cu display: table și în interiorul acestuia numărul dorit de coloane pe care doriți să le centrați folosind display: table-cell și vertical-align: middle .

Vezi exemplu

De ce funcționează acest lucru cu marcajul tabelului, dar nu cu elementele div? Pentru că rândurile din tabel au aceeași înălțime. Atunci când conținutul unei celule de tabel nu folosește tot spațiul disponibil în înălțime, browserul adaugă automat umplutură verticală pentru a centra conținutul.

proprietatea poziției

Să începem cu elementele de bază ale alinierii verticale CSS div:

• poziție: static este implicit. Elementul este redat conform ordinii HTML;
• poziție: absolută - folosită pentru a determina poziția exactă a unui element. Această poziție este întotdeauna legată de elementul părinte poziționat relativ cel mai apropiat (nu static). Dacă nu determinați poziția exactă a unui element, veți pierde controlul asupra acestuia. Va apărea aleatoriu, ignorând complet fluxul documentului. În mod implicit, elementul apare în colțul din stânga sus;
• poziție: relativă - folosit pentru a poziționa un element față de poziția sa normală (statică). Această valoare păstrează ordinea fluxului de documente;
• poziție: fixă ​​- folosită pentru a poziționa elementul în raport cu fereastra browserului, astfel încât să fie întotdeauna vizibil în fereastra de vizualizare.

Notă: unele proprietăți ( top și z-index) funcționează numai dacă elementul este setat pe poziție (nu static).

Să trecem la treabă!

Doriți să implementați Alinierea centrală verticală CSS? Mai întâi creați un element cu poziție și dimensiuni relative. De exemplu: 100% în lățime și înălțime.

Al doilea pas poate varia în funcție de browserele țintă, dar puteți utiliza una dintre cele două opțiuni:

• Proprietate veche: trebuie să cunoașteți dimensiunea exactă a ferestrei pentru a elimina jumătate din lățime și jumătate din înălțime. Vezi exemplu;
• Noua proprietate CSS3: Puteți adăuga o proprietate de transformare cu o valoare de translație de 50% și blocul va fi întotdeauna în centru. Vezi exemplu.

Practic, dacă doriți să centrați conținutul, nu utilizați niciodată top: 40% sau stânga: 300px . Acest lucru funcționează bine pe ecranele de testare, dar nu este centrat.

Amintiți-vă poziția: fix? Puteți face același lucru cu el ca și cu o poziție absolută, dar nu aveți nevoie de o poziție relativă pentru elementul părinte - acesta va fi întotdeauna poziționat relativ la fereastra browserului.

Ați auzit de specificația flexbox?

Puteți folosi flexbox. Aceasta este mult mai bună decât orice altă opțiune centrați alinierea textului CSS pe verticală. Cu flexbox, gestionarea elementelor este ca o joacă de copii. Problema este că unele browsere trebuie să fie eliminate, cum ar fi IE9 și versiunile de mai jos. Iată un exemplu despre cum să centrați vertical un bloc:

Vezi exemplu

Folosind un aspect flexbox, puteți centra mai multe blocuri.

Dacă aplici ceea ce înveți din aceste exemple, poți stăpâni Alinierea blocului vertical CSS cât mai repede posibil.

Link-uri și lecturi suplimentare

Învățarea de marcare CSS

FlexBox Froggy

Cutie de nisip Flexbox

Traducerea articolului „ Aliniere verticală CSS pentru toată lumea (manechine incluse)” a fost pregătit de echipa prietenoasă de proiect.

Fiecare designer de layout se confruntă în mod constant cu nevoia de a alinia conținutul într-un bloc: orizontal sau vertical. Există mai multe articole bune pe acest subiect, dar toate oferă o mulțime de opțiuni interesante, dar puține practice, motiv pentru care trebuie să aloci timp suplimentar pentru a evidenția punctele principale. Am decis să prezint aceste informații într-o formă care îmi este convenabilă, ca să nu mai caut pe google.

Alinierea blocurilor cu dimensiuni cunoscute

Cel mai simplu mod de a utiliza CSS este alinierea blocurilor care au o înălțime cunoscută (pentru alinierea verticală) sau lățime (pentru alinierea orizontală).

Alinierea folosind umplutură

Uneori nu puteți centra un element, ci îi puteți adăuga margini folosind „ căptușeală".

De exemplu, există o imagine de 200 x 200 pixeli și trebuie să o centrați într-un bloc de 240 x 300. Putem seta înălțimea și lățimea blocului exterior = 200px și adăugați 20 de pixeli în partea de sus și de jos , și 50 la stânga și la dreapta.

.example-wrapper1 ( fundal : #535E73 ; lățime : 200 px ; înălțime : 200 px ; umplutură : 20 px 50 px ; )

Alinierea blocurilor poziționate absolut

Dacă blocul este setat la " poziție: absolută", apoi poate fi poziționat relativ la cel mai apropiat părinte cu „poziție: relativă". Aceasta necesită toate proprietățile (" top","corect","fund","stânga„) din blocul interior pentru a atribui aceeași valoare, precum și „marjă: auto”.

*Există o nuanță: lățimea (înălțimea) blocului interior + valoarea stânga (dreapta, jos, sus) nu trebuie să depășească dimensiunile blocului părinte. Este mai sigur să atribuiți 0 (zero) proprietăților din stânga (dreapta, jos, sus).

.example-wrapper2 ( poziție : relativă ; înălțime : 250 px ; fundal : url(space.jpg) ; ) .cat-king ( lățime : 200 px ; înălțime : 200 px ; poziție : absolut ; sus : 0 ; stânga : 0 ; jos : 0 ; dreapta : 0 ;

Alinierea orizontală

Alinierea folosind „text-align: center”

Pentru a alinia textul într-un bloc există o proprietate specială " alinierea textului". Când este setat la " centru„Fiecare linie de text va fi aliniată orizontal. Pentru textul cu mai multe linii, această soluție este folosită extrem de rar; mai des această opțiune poate fi găsită pentru alinierea intervalelor, link-urilor sau imaginilor.

Odată a trebuit să vin cu ceva text pentru a arăta cum funcționează alinierea textului folosind CSS, dar nu mi-a venit în minte nimic interesant. La început am decis să copiez o rimă pentru copii undeva, dar mi-am amintit că asta ar putea strica unicitatea articolului, iar dragii noștri cititori nu l-ar putea găsi pe Google. Și apoi am decis să scriu acest paragraf - la urma urmei, punctul nu este cu el, dar punctul este aliniat.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

Este demn de remarcat faptul că această proprietate va funcționa nu numai pentru text, ci și pentru orice elemente inline ("display: inline").

Dar acest text este aliniat la stânga, dar este într-un bloc care este centrat în raport cu învelișul.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; lățime : 40% ; padding : 10px ; text-align : stânga ; fundal : #FFE5E5 ; )

Alinierea blocurilor folosind marginea

Elementele bloc cu o lățime cunoscută pot fi aliniate cu ușurință pe orizontală, setându-le la „margin-left: auto; margin-right: auto”. De obicei se folosește abrevierea: „ marja: 0 auto" (orice valoare poate fi folosită în loc de zero). Dar această metodă nu este potrivită pentru alinierea verticală.

.lama-wrapper ( înălțime : 200px ; fundal : #F1BF88 ; ) .lama1 ( înălțime : 200px ; lățime : 200px ; fundal : url(lama.jpg) ; margine : 0 auto ; )

Așa ar trebui să aliniați toate blocurile, acolo unde este posibil (unde nu este necesară poziționarea fixă ​​sau absolută) - este cel mai logic și adecvat. Deși acest lucru pare evident, am văzut uneori exemple înfricoșătoare cu indentări negative, așa că am decis să clarific.

Alinierea verticală

Alinierea verticală este mult mai problematică - aparent, acest lucru nu a fost prevăzut în CSS. Există mai multe modalități de a obține rezultatul dorit, dar nu toate sunt foarte frumoase.

Alinierea cu proprietatea înălțimea liniei

În cazul în care există o singură linie într-un bloc, puteți obține alinierea verticală a acestuia folosind butonul " înălțimea liniei" și setați-l la înălțimea dorită. Pentru fiabilitate, merită să setați și "înălțimea", a cărei valoare va fi egală cu valoarea "line-height", deoarece aceasta din urmă nu este acceptată în toate browserele.

.example-wrapper4 (înălțimea liniei: 100px; culoare: #DC09C0; fundal: #E5DAE1; înălțimea: 100px; alinierea textului: centru; )

De asemenea, este posibil să se realizeze alinierea blocului cu mai multe linii. Pentru a face acest lucru, va trebui să utilizați un bloc suplimentar de înveliș și să setați înălțimea liniei la acesta. Un bloc intern poate fi cu mai multe linii, dar trebuie să fie „inline”. Trebuie să-i aplicați „vertical-align: middle”.

.example-wrapper5 (înălțimea liniei: 160px; înălțimea: 160px; dimensiunea fontului: 0; fundal: #FF9B00; ) .example-wrapper5 .text1 (afișare: bloc inline; dimensiunea fontului: 14px; înălțimea liniei: 1.5 ; vertical-align : fundal : #FFFAF2 ;

Blocul de înveliș trebuie să aibă setat „dimensiunea fontului: 0”. Dacă nu setați dimensiunea fontului la zero, browserul va adăuga câțiva pixeli în plus. De asemenea, va trebui să specificați dimensiunea fontului și înălțimea liniei pentru blocul interior, deoarece aceste proprietăți sunt moștenite de la părinte.

Alinierea verticală în tabele

proprietate " vertical-align„ afectează și celulele tabelului. Cu valoarea setată la „middle”, conținutul din interiorul celulei este aliniat la centru. Desigur, aspectul tabelului este considerat arhaic în zilele noastre, dar în cazuri excepționale îl puteți simula prin specificarea „ afișare: tabel-celulă".

De obicei folosesc această opțiune pentru alinierea verticală. Mai jos este un exemplu de layout luat dintr-un proiect finalizat. Poza care este centrată vertical în acest fel este cea care interesează.

.one_product .img_wrapper ( afișare : table-cell ; înălțime : 169 px ; vertical-align : middle ; overflow : ascuns ; fundal : #fff ; lățime : 255 px ; ) .one_product img ( înălțime maximă : 169 px ; lățime maximă : 100 % ; lățime minimă : 140 px ;

Trebuie amintit că, dacă un element are un set „float” altul decât „none”, atunci va fi în orice caz bloc (afișare: bloc) - atunci va trebui să utilizați un înveliș suplimentar de bloc.

Alinierea cu un element suplimentar în linie

Și pentru elementele inline puteți folosi „ vertical-align: mijloc„. În plus, toate elementele cu „ display: inline„care sunt pe aceeași linie se vor alinia cu o linie centrală comună.

Trebuie să creați un bloc auxiliar cu o înălțime egală cu înălțimea blocului părinte, apoi blocul dorit va fi centrat. Pentru a face acest lucru, este convenabil să folosiți pseudo-elementele:before sau:after.

.example-wrapper6 (înălțime: 300px; text-align: center; fundal: #70DAF1; ) .pudge (afișare: inline-block; vertical-align: middle; fundal: url(pudge.png) ; fundal-culoare: # fff ; lățime : 200 px ; înălțime : 200 px ;

Afișaj: flex și aliniere

Dacă nu vă pasă foarte mult de utilizatorii Explorer 8 sau vă pasă atât de mult încât sunteți dispus să introduceți o bucată de javascript suplimentar pentru ei, atunci puteți folosi „display: flex”. Cutiile flexibile sunt excelente pentru a rezolva problemele de aliniere și scrieți doar „margin: auto” pentru a centra conținutul în interior.

Până acum, practic nu am întâlnit niciodată această metodă, dar nu există restricții speciale pentru ea.

.example-wrapper7 ( display : flex ; înălțime : 300px ; fundal : #AEB96A ; ) .example-wrapper7 img ( margine : automat ; )

Ei bine, atât am vrut să scriu despre alinierea CSS. Acum centrarea conținutului nu va fi o problemă!

Cred că mulți dintre voi care ați avut de-a face cu aspectul ați întâmpinat nevoia de a alinia elementele pe verticală și de a cunoaște dificultățile care apar la alinierea unui element la centru.

Da, există o proprietate specială de aliniere verticală cu mai multe valori în CSS pentru alinierea verticală. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.

Să comparăm următoarele abordări. Aliniați folosind:

• mese,
• indentare,
• înălțimea liniei
• întindere,
• marja negativa,
• transforma
• pseudo element
• flexbox.

Pentru a ilustra, luați în considerare următorul exemplu.

Există două elemente div, unul dintre ele imbricat în celălalt. Să le dăm clasele corespunzătoare - exterioare și interioare.

Provocarea este de a alinia elementul interior cu centrul elementului exterior.

În primul rând, să luăm în considerare cazul când dimensiunile blocurilor externe și interne cunoscut. Să adăugăm afișarea regulii: bloc inline la elementul interior și text-align: centru și vertical-align: mijloc la elementul exterior.

Amintiți-vă că alinierea se aplică numai elementelor care au un mod de afișare în linie sau bloc în linie.

Să setăm dimensiunile blocurilor, precum și culorile de fundal, astfel încât să le vedem marginile.

Exterior ( lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoarea fundalului: #ffc; ) .intern ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoarea fundalului : #fcc )
După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/

De ce sa întâmplat asta? Chestia este că proprietatea de aliniere verticală afectează alinierea elementul în sine, nu conținutul său(cu excepția cazului în care este aplicat celulelor tabelului). Prin urmare, aplicarea acestei proprietăți elementului exterior nu a produs nimic. Mai mult, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline sunt aliniate vertical față de blocurile adiacente, iar în cazul nostru avem un bloc inline.

Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.

Alinierea folosind un tabel

Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu un tabel dintr-o celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.

http://jsfiddle.net/c1bgfffq/1/

Dezavantajul evident al acestei soluții este că, din punct de vedere semantic, este incorect folosirea tabelelor pentru aliniere. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.

Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.

Alinierea folosind indentarea

Dacă înălțimile blocurilor interioare și exterioare sunt cunoscute, atunci alinierea poate fi stabilită folosind indentările verticale ale blocului interior folosind formula: (H exterior – H interior) / 2.

Exterior ( înălțime: 200px; ) .interior (înălțime: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.

Alinierea folosind înălțimea liniei

Dacă știți că blocul interior nu trebuie să ocupe mai mult de un rând de text, atunci puteți utiliza proprietatea line-height și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu trebuie să se încadreze la a doua linie, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.

Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( spațiu alb: nowrap; overflow: ascuns; )
http://jsfiddle.net/c1bgfffq/12/

Această tehnică poate fi, de asemenea, utilizată pentru a alinia textul cu mai multe linii dacă redefiniți valoarea înălțimii liniei pentru blocul interior și, de asemenea, adăugați afișarea: inline-block și vertical-align: reguli de mijloc.

Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( înălțime linie: normal; afișare: bloc în linie; aliniere verticală: mijloc; )
http://jsfiddle.net/c1bgfffq/15/

Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.

Alinierea folosind „stretch”

Această metodă poate fi utilizată atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea blocului intern.

Pentru a face acest lucru aveți nevoie de:

1. setați poziționarea relativă față de blocul extern și poziționarea absolută față de blocul intern;
2. adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
3. setați umplutura verticală a blocului interior la automat.

.exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 0; jos: 0; margine: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Ideea din spatele acestei tehnici este că setarea unei înălțimi pentru un bloc întins și poziționat absolut face ca browserul să calculeze umplutura verticală într-un raport egal dacă este setat la automat.

Aliniere cu marginea negativă-sus

Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se folosește atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.

Trebuie să setați blocul extern la poziționare relativă, iar blocul intern la poziționare absolută. Apoi, trebuie să mutați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și să-l ridicați cu jumătate de înălțime margine-top: -H interior / 2.

Exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margine-sus: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.

Alinierea cu transformarea

Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea unității interioare este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50% .

Exterior ( poziție: relativ; ) .intern ( poziție: absolut; sus: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

De ce a fost imposibil să setați valoarea ca procent în metoda anterioară? Deoarece valorile procentuale ale marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și ar trebui să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este perfectă pentru aceasta.

Dezavantajul acestei metode este că nu poate fi folosită dacă unitatea interioară are poziționare absolută.

Aliniere cu Flexbox

Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (cunoscută în mod popular sub numele de Flexbox). Acest modul vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, aranjandu-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.

Blocul exterior trebuie setat să afișeze: flex și blocul interior la margine: auto . Și asta-i tot! Frumos, nu-i așa?

Exterior ( afișaj: flex; lățime: 200 px; înălțime: 200 px; ) . interior ( lățime: 100 px; margine: automat; )
http://jsfiddle.net/c1bgfffq/14/

Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.

Ce metodă ar trebui să aleg?

Trebuie să începeți de la declarația problemei:

• Pentru a alinia textul pe verticală, este mai bine să utilizați indentări verticale sau proprietatea line-height.
• Pentru elementele poziționate absolut cu o înălțime cunoscută (de exemplu, pictograme), metoda cu o proprietate negativă margin-top este ideală.
• Pentru cazuri mai complexe, când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo element sau proprietatea transform.
• Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi ale browserului IE, atunci, desigur, este mai bine să utilizați Flexbox.

Etichete: Adăugați etichete