Articolul de astăzi își propune să vă arate cum să centrați un div, atât pe orizontală, cât și pe verticală, folosind câteva trucuri CSS. De asemenea, vă vom spune cum să centrați întreaga pagină sau într-un element div individual.

Centrați cu ușurință un element DIV pe pagină

Această metodă va funcționa perfect în toate browserele.

CSS

Center-div (marja: 0 automat; lățime: 100px; )

Exemplu

Valoarea auto din proprietatea margine setează marginile din stânga și din dreapta la întregul spațiu disponibil pe pagină. Lucrul important de reținut aici este că elementul div centrat trebuie să aibă setată o valoare a lățimii.

Centrarea unui DIV în interiorul unui element DIV în mod vechi

Această metodă div de aliniere centrală va funcționa în toate browserele.

CSS

Outer-div ( umplutură: 30 px; ) . inner-div ( marjă: 0 automat; lățime: 100 px; )

HTML

Exemplu

Div-ul exterior poate fi plasat oriunde, dar div-ul interior trebuie să aibă o lățime specificată ( lăţime).

Centrarea unui DIV în interiorul unui element DIV folosind inline-block

În această metodă centrare divîn interiorul unui div nu este necesar să specificați lățimea elementului interior. Va funcționa în toate browsere moderne, inclusiv IE8.

CSS

Outer-div ( padding: 30px; text-align: center; ) .inner-div ( display: inline-block; padding: 50px; )

HTML

Exemplu

proprietatea text-align funcționează numai pe elementele inline. Valoarea inline-block permite ca div-ul interior să fie afișat ca element inline și, de asemenea, ca bloc ( inline-block). Proprietatea text-align pe elementul div exterior ne va permite să centrem div-ul interior.

Centrați un DIV în interiorul unui element DIV orizontal și vertical

Aici margin: auto este folosit pentru a centra div-ul în centrul paginii. Exemplul va funcționa în toate browserele moderne.

CSS

Outer-div ( umplutură: 30 px; ) . inner-div ( margine: automată; lățime: 100 px; înălțime: 100 px; )

HTML

Exemplu

Elementul div interior trebuie să aibă o lățime specificată ( lăţime) și înălțimea ( înălţime). Metoda nu va funcționa dacă elementul div exterior are o înălțime fixă.

Centrați DIV în partea de jos a paginii

Aici pentru locații div centrat vertical folosind marginea: auto și poziționare absolută pentru elementul exterior. Metoda va funcționa în toate browserele moderne.

CSS

Div-exterior (poziție: absolut; jos: 30 px; lățime: 100%; ) .div-interior (marja: 0 automat; lățime: 100 px; înălțime: 100 px; culoare de fundal: #ccc; )

HTML

Exemplu

Div-ul interior trebuie să aibă o lățime setată. Spațiul din partea de jos a paginii este ajustat folosind proprietatea de jos a div-ului exterior. De asemenea, puteți centra un div în partea de sus a paginii, înlocuind proprietatea de jos cu proprietatea de sus.

Centrați DIV-urile pe pagină vertical și orizontal

Aici, pentru a centra div-ul, folosim din nou margin: poziționarea automată și absolută a div-ului exterior. Metoda va funcționa în toate browserele moderne.

CSS

Center-div (poziție: absolut; margine: automat; sus: 0; dreapta: 0; jos: 0; stânga: 0; lățime: 100px; înălțime: 100px; )

Exemplu

Elementul div trebuie să aibă un set de lățime ( lăţime) și înălțimea ( înălţime).

Efectuarea de centrare adaptivă a unui element DIV pe pagină

Aici pentru alinierea div in centru folosind CSS Facem ca lățimea elementului div să răspundă, astfel încât să reacționeze la modificările dimensiunii ferestrei. Această metodă funcționează în toate browserele.

CSS

Center-div (marja: 0 automat; lățime maximă: 700px; )

Exemplu

Un element div centrat trebuie să aibă proprietatea de lățime maximă setată.

Centrarea unui DIV în interiorul unui element folosind proprietățile blocului interior

Elementul interior div aici este receptiv. Această metodă de centrare a unui div în interiorul unui div va funcționa în toate browserele.

CSS

Div-exterior (padding: 30px; ) .inner-div (marja: 0 automat; lățime maximă: 700px; )

HTML

Exemplu

Div-ul interior trebuie să aibă proprietatea de lățime maximă setată.

Centrarea a două div-uri receptive una lângă alta

Aici avem două elemente div receptive una lângă alta. Aceasta metoda setare divîn centrul ecranului va funcționa în toate browserele moderne.

CSS

Container ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) ecran și (lățime maximă: 600 px) ( .left-div, .right-div ( lățime maximă stânga: 100%; ) )

HTML

Exemplu

Aici avem mai multe elemente cu proprietatea inline-block aplicată, situate în interiorul unui container centrat. Acest exemplu folosește și interogări media CSS; adică, dacă dimensiunea ecranului este mai mică de 600 de pixeli, atunci proprietatea max-width atât pentru div-ul din stânga cât și din dreapta este setată la 100%.

Element DIV centrat folosind Flexbox

Aici centrem div-ul CSS folosind Flexbox. Este destinat să faciliteze procesul de dezvoltare a designului interfețe cu utilizatorul. Acest modul este acceptat de Chrome 38+, IE11, Microsoft Edge, Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ și de asemenea Browser Android 40+ .

CSS

Container ( display: flex; align-items: center; justify-content: center; înălțime: 100vh; ) .item (culoare fundal: #f3f2ef; chenar-radius: 3px; lățime: 200px; înălțime: 100px; )

Vlad Merjevici

Datorită faptului că conținutul celulelor tabelului poate fi aliniat simultan pe orizontală și pe verticală, posibilitățile de control al poziției elementelor unul față de celălalt sunt extinse. Tabelele vă permit să specificați alinierea imaginii, text, câmpuri de formular și alte elemente relativ unele la altele și pagina web în ansamblu. În general, alinierea este necesară în principal pentru a stabili o comunicare vizuală între elemente diferite, precum și grupările acestora.

Centrare pe verticală

O modalitate de a arăta vizitatorului focalizarea și numele site-ului este să folosești o pagină de introducere. Aceasta este prima pagină pe care, de regulă, există un ecran de splash flash sau o imagine care exprimă ideea principală a site-ului. Imaginea este și un link către alte secțiuni ale site-ului. Trebuie să plasați această imagine în centrul ferestrei browserului, indiferent de rezoluția monitorului. În acest scop, puteți utiliza un tabel cu lățime și înălțime de 100% (exemplul 1).

Exemplul 1: Centrarea desenului

ÎN în acest exemplu alinierea orizontală este setată folosind parametrul etichetei align="center". , iar conținutul celulei poate să nu fie centrat vertical, deoarece aceasta este poziția implicită.

Pentru a seta înălțimea mesei la 100%, trebuie să eliminați, codul își încetează valabilitatea.

Folosind lățimea și înălțimea pe tot parcursul zona accesibila pagina web garantează că conținutul tabelului va fi aliniat strict în centrul ferestrei browserului, indiferent de dimensiunea acestuia.

Aliniere orizontala

Datorita combinatiei aliniază atributele(alinierea orizontală) și valign (alinierea verticală) a etichetei , este permisă setarea mai multor tipuri de poziții ale elementelor unul față de celălalt. În fig. Figura 1 prezintă modalități de aliniere orizontală a elementelor.

Să ne uităm la câteva exemple de aliniere a textului conform figurii de mai jos.

Alinierea de sus

Pentru a specifica alinierea superioară a conținutului celulei, pentru o etichetă necesare pentru instalare atribut de valign cu valoarea de sus (exemplul 2).

Exemplul 2: Utilizarea valign

Coloana 1

Coloana 2

În acest exemplu, caracteristicile celulei sunt controlate folosind parametrii etichetei , dar este și mai convenabil să schimbați prin stiluri. În special, alinierea în celule este specificată de proprietățile vertical-align și text-align (exemplul 3).

Exemplul 3: aplicarea stilurilor pentru aliniere

Coloana 1

Coloana 2

Pentru a scurta codul, acest exemplu folosește gruparea selectoarelor, deoarece proprietățile de aliniere verticală și de umplutură sunt aplicate la două celule în același timp.

Alinierea de jos se face în același mod, dar în loc de valoarea de sus, se folosește partea de jos.

Alinierea la centru

În mod implicit, conținutul celulei este aliniat la centrul liniei lor verticale, așa că dacă coloanele au înălțimi diferite, trebuie să setați alinierea la marginea de sus. Uneori mai trebuie să părăsiți metoda de aliniere inițială, de exemplu, când plasați formule, așa cum se arată în Fig. 2.

În acest caz, formula este situată strict în centrul ferestrei browserului, iar numărul acesteia este situat pe marginea dreaptă. Pentru a aranja elementele în acest fel, veți avea nevoie de un tabel cu trei celule. Celulele cele mai exterioare ar trebui să aibă aceleași dimensiuni, în celula din mijloc alinierea se face în centru, iar în cea dreaptă - de-a lungul marginii din dreapta (exemplul 4). Acest număr de celule este necesar pentru a vă asigura că formula este poziționată în centru.

Exemplul 4: Alinierea formulei

(18.6)

În acest exemplu, prima celulă a tabelului este lăsată goală, servește doar pentru a crea o indentare, care, apropo, poate fi setată și folosind stiluri.

Alinierea elementelor de formular

Folosind tabele, este convenabil să determinați poziția câmpurilor de formular, mai ales atunci când acestea sunt intercalate cu text. Una dintre opțiunile de proiectare pentru formular, care este destinată introducerii unui comentariu, este prezentată în Fig. 3.

Pentru ca textul din apropierea câmpurilor formularului să fie aliniat la dreapta, iar elementele formularului în sine să fie aliniate la stânga, veți avea nevoie de un tabel cu frontieră invizibilăși două coloane. Coloana din stânga va conține textul în sine, iar coloana din dreapta va conține câmpuri de text (exemplul 5).

Exemplul 5: Alinierea câmpurilor de formular

Nume
E-mail
Un comentariu

În acest exemplu, pentru acele celule în care este necesară alinierea corectă, este adăugat atributul align="right". Pentru a vă asigura că eticheta Comentariu este poziționată în partea de sus a textului cu mai multe linii, celula corespunzătoare este setată la alinierea sus folosind atributul valign.

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. Alinierea cu:

• Mese,
• indentare,
• inaltimea liniei
• întindere,
• marja negativa,
• transforma
• pseudo element
• flexbox.

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

Sunt două element div, cu 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ă Unitate interioară aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/

De ce s-a întâmplat? 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, cererea a acestei proprietati La element exterior nu a dat nimic. Mai mult decât atât, 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/

Dezavantaj evident această decizie– 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ă numai în număr limitat cazurile în care 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/

De asemenea această tehnică poate fi folosit și pentru nivelare text pe mai multe linii, dacă redefiniți valoarea înălțimii liniei pentru blocul interior și adăugați, de asemenea, afișarea: inline-block și vertical-align: middle rules.

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. instalare valoare automată pentru spatiile verticale ale blocului interior.

.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 obligă browserul să calculeze margini verticaleîn proporţie egală dacă valoarea lor este setată la auto .

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 la jumătate din propria î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 în metoda anterioară Nu ai putea seta valoarea ca procent? Deoarece valori procentuale proprietățile marjei calculat relativ la element părinte, o valoare de 50% ar fi egală cu jumătate din înălțimea blocului exterior și trebuia să ridicăm blocul interior la jumătate din înălțimea proprie. Exact pentru asta transforma proprietatea.

Dezavantajul acestei metode este că nu poate fi utilizată 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 e 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

CSS

HTML

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. Alinierea cu:

• Mese,
• indentare,
• inaltimea 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 s-a întâmplat? 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 la jumătate din propria î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 utilizată 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 e 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.

Există mai multe moduri fundamental diferite de a centra un obiect pe verticală folosind CSS, cu toate acestea, dificultatea poate fi în alegerea celui potrivit. Ne vom uita la unele dintre ele și, de asemenea, vom face un mic site web folosind cunoștințele acumulate.

Aliniere verticală Centrarea nu este atât de ușor de realizat folosind CSS. Există multe moduri și nu toate funcționează în toate browserele. Să ne uităm la 5 metode diferite și la avantajele și dezavantajele fiecăreia. Exemplu.

1a metoda

Această metodă presupune că setăm un element