Meniul
AcasăFișiere și foldere

Alinierea verticală în div. CSS: aliniere verticală a textului. Alinierea în linie cu vertical-align

Foarte des sarcina este de a alinia un bloc în centrul paginii / ecranului și chiar și așa, fără un script Java, fără o sarcină dimensiuni rigide sau indentări negative, astfel încât barele de defilare să funcționeze și pentru părinte dacă blocul își depășește dimensiunea. Există destul de multe exemple monotone pe Internet despre cum să aliniați un bloc la centrul ecranului. De regulă, majoritatea se bazează pe aceleași principii.

Mai jos sunt principalele modalități de a rezolva problema, avantajele și dezavantajele lor. Pentru a înțelege esența exemplelor, vă recomand să reduceți înălțimea/lățimea ferestrei Rezultate în exemplele de la linkurile furnizate.

Opțiunea 1: indentare negativă.

Poziționare bloc folosind atributele de sus și din stânga cu 50% și cunoscând înălțimea și lățimea blocului în avans, setați o marjă negativă, care este egală cu jumătate din dimensiune bloc. Un minus imens această opțiune este că trebuie să numărați umplutura negativă. De asemenea bloc nu se comportă corect atunci când este înconjurat de bare de defilare - este pur și simplu tăiat deoarece are margini negative.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; ) .block ( lățime: 250px; înălțime: 250px; poziție: absolut; sus: 50%; stânga : 50%; margine: -125px 0 0 -125px img (lățime maximă: 100%; înălțime: automată; afișare: bloc; margine: 0 auto; margine: niciuna; ) )

Opțiunea 2. Indentare automată.

Mai puțin obișnuit, dar similar cu primul. Pentru bloc setați lățimea și înălțimea, poziția cu atributele de sus dreapta jos stânga la 0 și setați marginea automată. Avantajul acestei opțiuni este utilizarea barelor de defilare mamă, dacă acesta din urmă are 100% lățime și înălțime. Dezavantajul acestei metode este setarea rigidă a dimensiunilor.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; ) .block ( lățime: 250px; înălțime: 250px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; margine: auto; înălțime: auto; margine: auto;

Opțiunea 3. Tabel.

Sa intrebam mamă stiluri de tabel, celulă mamă Setați alinierea textului la centru. A bloc setăm modelul blocului de linii. Dezavantajele pe care le primim sunt barele de defilare care nu funcționează și, în general, estetica „emulației” mesei nu este.

Părinte ( lățime: 100%; înălțime: 100%; afișare: tabel; poziție: absolut; sus: 0; stânga: 0; > .interior ( afișare: tabel-celulă; text-align: center; vertical-align: middle; ) ) .bloc ( display: inline-block; img ( display: block; border: none; ) )

Pentru a adăuga un scroll la acest exemplu, va trebui să adăugați încă un element la design.
Exemplu: jsfiddle.net/serdidg/fk5nqh52/3.

Opțiunea 4. Pseudo-element.

Această opțiune este lipsită de toate problemele enumerate în metodele anterioare și, de asemenea, rezolvă problemele originale. Ideea este că mamă setați stiluri pseudo elementînainte, și anume 100% înălțime, aliniere la centru și model de bloc inline. Este la fel cu bloc este setat un model de bloc de linii, centrat. La bloc nu a „căzut” sub pseudo element, când dimensiunile primului sunt mai mari decât mamă, indicați mamă spații albe: nowrap și font-size: 0, după care bloc anulați aceste stiluri cu următoarele - spații albe: normal. ÎN în acest exemplu font-size: 0 este necesar pentru a elimina spațiul rezultat dintre mamăȘi bloc datorită formatării codului. Spațiul poate fi îndepărtat în alte moduri, dar este considerat cel mai bine să îl evitați pur și simplu.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; spații albe: nowrap; text-align: center; font-size: 0; &:before ( înălțime: 100%;

Sau, dacă aveți nevoie ca părintele să ocupe doar înălțimea și lățimea ferestrei, și nu întreaga pagină:

Părinte ( poziție: fix; sus: 0; dreapta: 0; jos: 0; stânga: 0; overflow: automat; spații albe: nowrap; text-align: center; font-size: 0; &:before ( înălțime: 100%;

Opțiunea 5. Flexbox.

Una dintre cele mai simple și mai elegante moduri este utilizarea flexbox. Nu necesită mișcări inutile ale corpului, descrie destul de clar esența a ceea ce se întâmplă și este foarte flexibil. Singurul lucru care merită reținut atunci când alegeți aceasta metoda- suport pentru IE de la versiunea 10 inclusiv. caniuse.com/#feat=flexbox

Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; afișare: flex; align-items: center; align-content: centru; justify-content: centru; overflow: automat; ) .block ( fundal: #60a839; img ( afișare: bloc; chenar: niciunul; ) )

Opțiunea 6. Transform.

Potrivit dacă suntem limitați de structură și nu există nicio modalitate de a manipula elementul părinte, dar blocul trebuie aliniat cumva. va veni în ajutor funcția css Traduceți() . O valoare de 50% poziționare absolută va poziționa colțul din stânga sus al blocului exact în centru, apoi o valoare de translație negativă va muta blocul în raport cu propriile dimensiuni. Vă rugăm să rețineți că acestea pot pluti efecte negative sub formă de margini neclare sau stil de font. De asemenea, această metodă poate duce la probleme cu calcularea poziției blocului folosind java-script Uneori, pentru a compensa pierderea de 50% din lățimea din cauza utilizării proprietății CSS stânga, regula specificată pentru bloc. ajutor: margine-dreapta: -50% .

Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; overflow: automat; ) .block (poziție: absolut; sus: 50%; stânga: 50%; transform: translate( -50%, -50%) img (afișare: bloc; ) )

Opțiunea 7. Buton.

Opțiunea utilizator azproduction unde blocîncadrat într-o etichetă de buton. Butonul are proprietatea de a centra tot ce se afla in interiorul lui, si anume elementele modelului inline si block-line (inline-block). În practică, nu recomand să-l folosești.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; fundal: niciunul; chenar: niciunul; contur: niciunul; ) .block ( afișare: bloc inline; img (afișare: bloc;; chenar: niciunul; ) )

Primă

Folosind ideea celei de-a patra opțiuni, puteți seta marginile Pentru bloc, iar acesta din urmă va fi afișat corespunzător, înconjurat de bare de defilare.
Exemplu: jsfiddle.net/serdidg/nfqg9rza/2.

De asemenea, puteți alinia imaginea la centru și dacă imaginea este mai mare mamă, scalați-l la dimensiune mamă.
Exemplu: jsfiddle.net/serdidg/nfqg9rza/3.
Exemplu cu o imagine mare:

Toți cei care se ocupă de layout mai devreme sau mai târziu se confruntă cu nevoia de a alinia elementele pe verticală... și știu ce dificultăți pot apărea la alinierea unui element la centru. CSS are o proprietate `vertical-align` cu mai multe valori care, în mod logic, ar trebui să efectueze alinierea verticală. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat.

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

1. Alinierea folosind un tabel

În acest caz, înlocuim blocul exterior cu un tabel cu o singură celulă. Alinierea va fi aplicată conținutului celulei, adică blocului interior.

HTML

CSS

Exterior ( lățime : 200 px ; înălțime : 200 px ; text-align : centru ; vertical-align : mijloc ; culoare de fundal : #ffc ; )

Principalul dezavantaj această decizie, din punct de vedere semantic, tabelul nu este folosit în scopul propus. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.

Primul dezavantaj poate fi parțial evitat prin înlocuirea etichetelor de tabel cu div-uri și setarea modului de afișare a tabelului în CSS.

HTML

CSS

Outer-wrapper ( display : table ; ) .outer ( display : table-cell ; )

2. Alinierea folosind indentări

Cu condiția să cunoaștem înălțimile blocurilor interioare și exterioare, alinierea poate fi stabilită folosind indentările verticale ale blocului interior folosind formula: (H exterior – H interior) / 2.

CSS

Exterior ( înălțime : 200 px ; ) . interior ( înălțime : 100 px ; margine : 50 px 0 ; )

Dezavantajul soluției este cunoașterea obligatorie a înălțimii ambelor blocuri.

3. Alinierea folosind înălțimea liniei

Dacă Unitate interioară nu ocupă mai mult de un rând de text, apoi puteți utiliza proprietatea line-height și o puteți seta egală cu înălțimea bloc extern. Deoarece conținutul blocului interior nu trebuie să se încadreze la a doua linie, este recomandabil să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.

CSS

Exterior ( înălțime : 200 px ; înălțime linie : 200 px ; ) . interior ( spațiu alb : nowrap ; overflow : ascuns ; )

Această metodă poate fi folosită și pentru a alinia textul cu mai multe linii. Pentru a face acest lucru, blocul interior trebuie să suprascrie valoarea înălțimii liniei și, de asemenea, să adauge afișajul: inline-block și vertical-align: middle rules.

CSS

Exterior ( înălțime : 200 px ; înălțime linie : 200 px ; ) . interior ( înălțime linie : normal ; afișare : bloc inline ; aliniere verticală : mijloc ; )

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

4. Alinierea folosind „întindere”

Această metodă poate fi folosită atunci când înălțimea blocului intern ne este cunoscută, dar cea externă nu.

Pentru a aplica această metodă avem nevoie de:

  • Comandați unitatea externă poziționare relativă poziție: relativă , iar cea interioară este absolută poziție: absolută ;
  • Adăugați mai multe reguli de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
  • Setați umplutura verticală a blocului intern la automat.

CSS

Exterior ( poziție : relativă ; ) . interior ( înălțime : 100 px ; poziție : absolută ; sus : 0 ; jos : 0 ; margine : auto 0 ; )

5. Alinierea cu marginea negativă-sus

Similar cu cea precedentă, această metodă este folosită atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea celui intern.

Trebuie să oferiți poziționarea relativă a blocului extern și poziționarea absolută a blocului intern. Apoi deplasați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și ridicați-l la jumătate din înălțimea propriei margini de sus: -H interior / 2 .

CSS

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

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

6. Alinierea folosind transformarea

Metoda poate fi utilizată atunci când înălțimea unității interioare este necunoscută. Trebuie să mutați blocul interior în jos cu jumătate din înălțimea de sus a blocului exterior: 50%, apoi utilizați proprietatea de transformare și mutați-l înapoi în sus folosind funcția translateY(-50%).

CSS

Exterior ( poziție : relativ ; ) .intern ( poziție : absolut ; top : 50% ; transform : translateY (-50% ); )

7. Alinierea cu un pseudo-element

Acesta este cel mai mult metoda universala, care poate fi folosit atunci când înălțimile ambelor blocuri sunt necunoscute.

Esența metodei este de a adăuga un bloc inline cu o înălțime de 100% în interiorul blocului exterior și de a-l atribui aliniere verticală. Astfel, înălțimea blocului adăugat va fi egală cu înălțimea blocului exterior. Blocul interior va fi aliniat vertical în raport cu cel adăugat, și deci blocul exterior.

Pentru a nu încălca semantica, este recomandabil să adăugați un bloc inline folosind pseudoelementele înainte sau după.

CSS

Exterior : înainte ( afișare : bloc în linie ; înălțime : 100 % ; aliniere verticală : mijloc ; conținut : „” ; ) . interior ( afișare : bloc în linie ; aliniere verticală : mijloc ; )

Dezavantajul acestei metode este că nu poate fi folosită când poziționare absolută Unitate interioară.

8. Alinierea cu Flexbox

Cea mai modernă metodă de aliniere verticală este utilizarea Flexible Box Layout (sau Flexbox). 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ă.

Aliniați textul vertical în CSS- o muncă foarte grea. Am văzut destui oameni care se luptă cu asta încât să găsesc în mod constant 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ă" aliniere text" Oh, dacă totul ar fi atât de simplu...

proprietate CSS vertical-align 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 div-uri text, 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 asta să funcționeze trebuie să existe container părinte cu afișaj: masă și în interiorul acesteia - cantitatea necesară coloanele 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 aceeasi inaltime. Când conținutul unei celule de tabel nu folosește totul spatiu disponibilînălțime, browserul adaugă automat căptușeală 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 în raport cu acesta poziție 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 la valoarea poziţiei(Nu static).

Sa trecem la treaba!

Doriți să implementați Alinierea CSS centrat vertical? 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 aliniază textul la Centru CSS vertical. Cu flexbox, gestionarea elementelor este ca o joacă de copii. Problema este că trebuie să renunțați la unele browsere, 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.

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, pentru alinierea verticală există o proprietate specială de aliniere verticală în CSS cu mai multe valori. 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 folosind:

  • 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șajul regulii: bloc inline la elementul interior și aliniere text: centru și aliniere verticală: mijloc la elementul exterior.

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

Să setăm dimensiunile blocurilor, precum și culorile de fundal să le vadă limitele.

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 la element exterior nu a dat nimic. Mai mult, aplicarea acestei proprietăți la elementul interior nu va face nimic, din moment ce blocuri de linii(inline-block) sunt aliniate vertical în raport cu 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ă 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, de asemenea, pentru a alinia textul cu mai multe linii dacă înlocuiți valoarea înălțimii liniei pentru blocul interior și adăugați, de asemenea, afișajul: 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ă oferiți poziționarea relativă a blocului extern și poziționarea absolută a blocului intern. 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%; margin-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 sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi egală cu jumătate din înălțimea cutiei exterioare și trebuia 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 mod modern alinierea verticală este de a utiliza 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 vertical textul, este mai bine să utilizați indentări verticale sau proprietatea line-height.
  • Pentru elemente poziționate absolut cu inaltime cunoscuta(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

Când creați blocuri div, probabil că ați întâlnit situații în care trebuie să vă centrați div-ul orizontal și vertical folosind CSS pur. De exemplu, când creați ferestre pop-up cu . Există mai multe moduri de a implementa centrarea, iar în acest articol voi împărtăși modurile mele preferate și cele mai simple, folosind CSS sau jQuery.

În primul rând, elementele de bază:

Centrare orizontală în CSS

Acest lucru este ușor de făcut, folosim marginea pentru noi div bloc.

ClassName( margin:0 auto; lățime:200px; înălțime:200px; )

Pentru centrare bloc div numai pe orizontală, trebuie să definiți lățimea blocului (lățimea), utilizați proprietatea auto pentru marje stânga și dreapta. Această metodă va funcționa pentru toată lumea elemente de bloc(div, p, h1 și așa mai departe...). Pentru utilizare centrare orizontală pentru elementele șir (linkuri, imagini...), trebuie să aplicați parametrul afişa:bloc;

Centrare orizontală și verticală în CSS

Centrarea unui bloc div orizontal și vertical în același timp este puțin mai dificilă. Trebuie să cunoașteți dimensiunile blocului div din timp.

ClassName( lățime:300px; înălțime:200px; poziție:absolut; stânga:50%; sus:50%; margine:-100px 0 0 -150px; )

Prin utilizarea absolut Prin poziționarea unui bloc, îl putem detașa de elementele din jur și îi putem determina poziția în raport cu dimensiunea ferestrei browserului. Mutați blocul div la 50% în stânga și în partea de sus a ferestrei. Colțul din stânga sus al blocului se află acum în centrul ferestrei browserului. Tot ce rămâne este să instalați blocul div în centrul paginii mutându-l la jumătate din lățimea sa stânga şi jumătate din înălțimea lui sus. Ura! Rezultatul a fost centrarea excelentă a blocului pe css pur cod.

Centrare orizontală și verticală cu jQuery

Ca menționat mai devreme - Metoda CSS centrarea funcționează numai cu dimensiuni fixe. Dacă dimensiunile nu sunt definite, metoda jQuery va veni în ajutor:

$(window).resize(function())( $(".className").css(( poziție:"absolut", stânga: ($(window).width() - $(".className").outerWidth ( ))/2, sus: ($(window).height() - $(".className").outerHeight())/2 )); // Pentru a rula funcția când fereastra este încărcată: $(window).resize();

Operațiune aceasta metoda este să rulați funcția resize() folosind linia $(fereastră).resize(). Această funcție funcționează ori de câte ori fereastra browserului este redimensionată. Folosim outerWidth()Și outerHeight(), pentru că în contrast lăţime()Și înălţime(), acestea includ căptușeală și grosimea chenarului în dimensiunea pe care o returnează. Ultima linie, începe procesul centrare div blocați la încărcarea paginii.

Avantajul utilizării acestei metode este că este posibil să nu știți ce dimensiune are div-ul. Principalul dezavantaj– aceasta funcționează numai când JavaScript este activat. Prin urmare, această metodă este acceptabilă pentru interfețe multifuncționale precum VKontakte, Facebook etc.

Ca întotdeauna, nu ezitați să sugerați metoda preferată de centrare a blocurilor prin comentarii.