Meniul
AcasăTehnică

Alinierea centrului orizontal CSS. CSS - Aliniere la centru

Foarte des în aspect este necesară centrarea unui element orizontal și/sau vertical. Prin urmare, am decis să fac un articol cu ​​moduri diferite de centrare, astfel încât totul să fie la îndemână într-un singur loc.

Marja de aliniere orizontală: automată

Alinierea orizontală folosind marginea este utilizată atunci când lățimea elementului centrat este cunoscută. Lucrări pentru elemente de bloc:

Element ( margine-stânga: automat; margine-dreapta: automat; lățime: 50%; )

Specificarea automată pentru marginile din dreapta și din stânga le face egale, ceea ce centrează elementul orizontal în blocul părinte.

text-align: centru

Această metodă este potrivită pentru centrarea textului într-un bloc. text-align: center:

Aliniere cu text-align .wrapper ( text-align: center; )

Sunt aliniat la centru

poziție și marja negativă stângă

Potrivit pentru centrarea blocurilor de lățime cunoscută. Oferim poziția blocului părinte: relativ la poziția relativ la acesta, poziția elementului centrat: absolut , stânga: 50% și o marjă negativă-stânga a cărei valoare este egală cu jumătate din lățimea elementului:

Aliniere cu poziția .wrapper ( poziție: relativ; ) .wrapper p ( stânga: 50%; marjă: 0 0 0 -100px; poziție: absolut; lățime: 200px; )

Sunt aliniat la centru

display: inline-block + text-align: center

Metoda este potrivită pentru alinierea blocurilor de lățime necunoscută, dar necesită un părinte de ambalare. De exemplu, puteți centra un meniu orizontal astfel:

Aliniere cu afișaj: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

  • Acasă
  • Despre autor

Linie de aliniere verticală-înălțime

Pentru a alinia o linie de text, puteți utiliza aceleași valori de înălțime și spațiere între rânduri pentru blocul părinte. Potrivit pentru butoane, elemente de meniu etc.

line-height .wrapper ( înălțime: 100px; line-height: 100px; )

Sunt aliniat vertical

poziție și marja negativă în sus

Un element poate fi aliniat vertical dându-i o înălțime fixă ​​și aplicând o poziție: absolută și o marjă negativă în sus egală cu jumătate din înălțimea elementului aliniat. Blocului părinte trebuie să i se atribuie poziția: relativă:

Wrapper ( poziție: relativă; ) elem ( înălțime: 200px; margine: -100px 0 0; poziție: absolut; sus: 50%; )

Astfel, folosind poziţionarea şi marginile negative, puteţi centra un element pe pagină.

afișare: tabel-celulă

Pentru alinierea verticală, proprietatea display: table-cell este aplicată elementului, ceea ce îl forțează să emuleze o celulă de tabel. De asemenea, îi setăm înălțimea și alinierea verticală: mijloc . Să înfășurăm toate acestea într-un container cu proprietatea dislpay:; :

Afișare aliniere verticală: table-cell .wrapper ( afișare: tabel; lățime: 100%; ) .cell ( afișare: table-cell; înălțime: 100px; vertical-align: middle; )

Sunt aliniat vertical

Alinierea dinamică a unui element pe o pagină

Am analizat modalități de a alinia elemente pe o pagină folosind CSS. Acum să aruncăm o privire la implementarea jQuery.

Să conectăm jQuery la pagină:

Vă sugerez să scrieți o funcție simplă pentru a centra un element pe pagină, să-l numim alignCenter() . Elementul în sine acționează ca un argument al funcției:

Funcția alignCenter(elem) ( // codează aici )

În corpul funcției, calculăm dinamic și atribuim coordonatele centrului paginii proprietăților CSS din stânga și de sus:

Funcția alignCenter(elem) ( elem.css(( stânga: ($(window).width() - elem.width()) / 2 + "px", sus: ($(window).height() - elem. height()) / 2 + "px" // nu uitați să adăugați poziție: absolută elementului pentru a declanșa coordonatele )) )

În prima linie a funcției, obținem lățimea documentului și scădem din el lățimea elementului, împărțit la jumătate - acesta va fi centrul orizontal al paginii. A doua linie face același lucru, doar cu înălțimea pentru aliniere verticală.

Funcția este gata, tot ce rămâne este să o atașați la evenimentele de pregătire DOM și de redimensionare a ferestrei:

$(function() ( // apelează funcția de centrare când DOM-ul este gata alignCenter($(elem)); // apelează funcția când redimensionează fereastra $(window).resize(function() ( alignCenter($(elem) )); )) // funcția de centrare a elementelor alignCenter(elem) ( elem.css(( // se calculează coordonatele stânga și sus la stânga: ($(window).width() - elem.width()) / 2 + " px", sus: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Aplicarea Flexbox

Noile funcții CSS3, cum ar fi Flexbox, devin treptat obișnuite. Tehnologia ajută la crearea de markup fără a utiliza floats, poziționare etc. Poate fi folosit și pentru centrarea elementelor. De exemplu, aplicați Flexbox elementului părinte.wrapper și centrați conținutul în interior:

Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; înălțime: 500px; lățime: 500px; ) .wrapper .conținut ( marja: auto; /* margine: 0 auto numai pe orizontală */ /* margine: auto 0 numai pe verticală */ ) Lorem ipsum dolor sit amet

Această regulă centrează elementul orizontal și vertical în același timp - marginea funcționează acum nu numai pentru alinierea orizontală, ci și pentru cea verticală. Și fără o lățime/înălțime cunoscută.

Resurse aferente Ajută proiectul

Buna ziua! Continuăm să stăpânim elementele de bază ale limbajului HTML. Să vedem ce trebuie să scrieți pentru a alinia textul la centru, lățime sau margini.

Trecând la treabă, să vedem cum să centrați textul în HTML în trei moduri diferite. Ultimele două sunt legate direct la foaia de stil. Poate fi un fișier CSS care se conectează la paginile site-ului și le definește aspectul.

Metoda 1 - lucru direct cu HTML

De fapt, este destul de simplu. Vezi exemplul de mai jos.

Aliniați paragraful la centru.

Dacă trebuie să mutați fragmente de text într-un mod diferit, atunci în loc de parametrul „centru”, introduceți următoarele valori:

  • justificare – alinierea textului la lățimea paginii;
  • dreapta – pe marginea dreaptă;
  • stânga - la stânga.

Prin analogie, puteți muta conținutul care se află în anteturi (h1, h2) și container (div).

Metoda 2 și 3 - folosirea stilurilor

Designul prezentat mai sus poate fi ușor transformat. Efectul va fi același. Pentru a face acest lucru, trebuie să scrieți codul de mai jos.

Bloc de text.

În această formă, codul este scris direct în HTML pentru a centra conținutul textului.

Există o altă modalitate alternativă de a obține rezultate. Va trebui să faceți câțiva pași.

Pasul 1. În codul principal scrieți

Material text.

Pasul 2. În fișierul CSS inclus, introduceți următorul cod:

Rovno (text-align:center;)

Observ că cuvântul „rovno” este doar numele unei clase care poate fi numită diferit. Acest lucru este lăsat la latitudinea programatorului.

Prin analogie, în HTML puteți face textul centrat, justificat și aliniat la marginea dreaptă sau stângă a paginii. După cum puteți vedea, există mai multe opțiuni pentru a vă atinge obiectivul.

Doar câteva întrebări:

  • Faceți un proiect de informare non-profit?
  • Vrei ca site-ul tău să se claseze bine în motoarele de căutare?
  • Vrei să câștigi venituri online?

Dacă toate răspunsurile sunt pozitive, atunci priviți doar o abordare integrată a dezvoltării site-ului web. Informațiile vor fi deosebit de utile dacă rulează pe CMS-ul WordPress.

Aș dori să subliniez că propriile site-uri web sunt doar una dintre multele opțiuni pentru a genera venituri pasive sau active pe internet. Blogul meu este dedicat oportunităților financiare online.

Ați lucrat vreodată în domeniul arbitrajului de trafic, copywriting sau alte domenii de activitate care generează venituri primare sau suplimentare prin colaborare la distanță? Puteți afla despre asta și multe altele chiar acum pe paginile blogului meu.

Voi publica o mulțime de informații cu adevărat utile în viitor. Ține legătura. Dacă doriți, vă puteți abona la actualizările Workip prin e-mail. Formularul de abonare se găsește mai jos.

Alinierea elementelor pe orizontală și pe verticală se poate face în diferite moduri. Alegerea metodei depinde de tipul elementului (bloc sau inline), tipul poziționării acestuia, dimensiunea etc.

1. Alinierea orizontală la centrul blocului/pagina 1.1. Dacă blocul are o lățime: div ( lățime: 300px; margine: 0 auto; /*centrați elementul orizontal în blocul părinte*/ )

Dacă doriți să aliniați un element inline în acest fel, acesta trebuie să fie setat să afișeze: bloc;

1.2. Dacă un bloc este imbricat într-un alt bloc și nu are lățime/specificată: .wrapper (text-align: center;) 1.3. Dacă lățimea blocului este setată și trebuie să o fixați în centrul blocului părinte: .wrapper (poziție: relativă; /* setați poziționarea relativă pentru blocul părinte, astfel încât apoi să putem poziționa absolut blocul în interiorul acestuia * /) .box ( lățime: 400px; poziție: absolut; stânga: 50%; margin-left: -200px; /*deplasați blocul la stânga cu o distanță egală cu jumătate din lățime*/ ) 1.4. Dacă blocurile nu au o lățime specificată, le puteți centra folosind un bloc de înveliș părinte: .wrapper (text-align: center; /*center the content of the block*/) .box ( display: inline-block; / *aranjați blocurile într-un rând orizontal*/ margin-right: -0.25em /*eliminați marginea din dreapta dintre blocuri*/ ) 2. Alinierea verticală 2.1. Dacă textul ocupă un rând, de exemplu, pentru butoane și elemente de meniu: .button ( înălțime: 50px; line-height: 50px; ) 2.2. Pentru a alinia un bloc vertical în interiorul unui bloc părinte: .wrapper (poziție: relativ;) .box (înălțime: 100px; poziție: absolut; sus: 50%; margine: -50px 0 0 0; ) 2.3. Alinierea verticală după tipul tabelului: .wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; ) 2.4. Dacă unei casete i se dă o lățime și o înălțime și trebuie să fie centrată pe caseta părinte: .wrapper (poziție: relativ; ) .box (înălțime: 100px; lățime: 100px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; margine: auto: auto, pentru ca conținutul să nu se extindă; Poziționare absolută în centrul paginii/blocului folosind transformarea CSS3:

dacă sunt specificate dimensiuni pentru element

div ( width: 300px; /*setează lățimea blocului*/ height:100px; /*setează înălțimea blocului*/ transform: translate(-50%, -50%); poziție: absolut; top: 50 %; stânga: 50% ;

dacă elementul nu are dimensiuni și nu este gol

Un text aici h1 (marja: 0; transformare: traducere(-50%, -50%); poziție: absolut; sus: 50%; stânga: 50%; )

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ă a seta dimensiuni rigide sau indentări negative și astfel încât barele de defilare să funcționeze 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ționăm blocul cu atributele de sus și stânga la 50% și, știind în prealabil înălțimea și lățimea blocului, setăm o marjă negativă, care este egală cu jumătate din dimensiunea blocului. Un mare dezavantaj al acestei opțiuni este că trebuie să numărați indentările negative. De asemenea, blocul 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, setăm lățimea și înălțimea, poziționăm atributele sus dreapta jos stânga la 0 și setăm marginea automată. Avantajul acestei opțiuni este să lucreze barele de defilare pe părinte, dacă acesta din urmă are setate 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. Setăm stiluri de tabel pentru părinte și setăm alinierea textului în centru pentru celula părinte. Și dăm blocului un model de bloc de linie. 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 să stilați pseudo-elementul de dinainte pe părinte, și anume 100% înălțime, alinierea la centru și modelul blocului în linie. În același mod, blocul în sine este setat la un model de bloc de linie, aliniat la centru. Pentru a preveni ca blocul să „cade” sub pseudo-element atunci când dimensiunea primului este mai mare decât părintele său, indicăm părintelui spațiu alb: nowrap și font-size: 0, după care anulăm aceste stiluri pentru blocul cu următorul - spatiu alb: normal. În acest exemplu, font-size: 0 este necesar pentru a elimina spațiul rezultat dintre părinte și bloc din cauza 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 această metodă este suportul 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. Funcția css translate() va veni în ajutor. 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ă efectele negative pot apărea 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 ( display: block; ) )

Opțiunea 7. Buton. Opțiunea de azproducție utilizator, în care blocul este î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; ) )

Bonus Folosind ideea celei de-a patra opțiuni, puteți seta margini externe pentru bloc și, în același timp, acestea din urmă vor fi afișate adecvat înconjurate de bare de defilare.
Exemplu: jsfiddle.net/serdidg/nfqg9rza/2.

De asemenea, puteți alinia imaginea la centru și, dacă imaginea este mai mare decât cea părinte, scalați-o la dimensiunea părintelui.
Exemplu: jsfiddle.net/serdidg/nfqg9rza/3.
Exemplu cu o imagine mare:

  • 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, 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. Aliniați 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 sunt cunoscute. 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, 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? Ideea este că proprietatea vertical-align afectează alinierea elementului în sine, nu conținutul acestuia (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 indentări Dacă înălțimile blocurilor interioare și exterioare sunt cunoscute, atunci alinierea poate fi setată 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 cu î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 înălțime linie ș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 prin „întindere” Această metodă poate fi utilizată atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea blocului interior.

    Pentru a face acest lucru aveți nevoie de:

  • setați poziționarea relativă față de blocul extern și poziționarea absolută față de blocul intern;
  • 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;
  • 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.

    Alinierea folosind margine-top negativ 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 folosind transform Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea blocului interior 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ă.

    Alinierea cu Flexbox Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (cunoscută în mod popular ca 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 pentru a afișa: 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 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.