Centrarea CSS a blocurilor DIV: orizontală și verticală. Centrarea unui div orizontal și vertical

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 sunt cunoscute. 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? Ideea este că proprietatea de aliniere verticală afectează alinierea elementului în sine, nu conținutul acestuia (cu excepția cazului în care este aplicată la celulele 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 folosită și 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ș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 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 să afișeze: flex și blocul interior la margine: auto . Și este 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.

În CSS, unele lucruri aparent simple nu sunt atât de ușor de făcut. Unul dintre aceste lucruri este alinierea, adică. când un element trebuie poziționat într-un anumit mod față de altul.

Acest articol prezintă câteva soluții gata făcute care vor ajuta la simplificarea activității de centrare a elementelor pe orizontală și/sau verticală.

Notă: Sub fiecare soluție este o listă de browsere care indică versiunile în care funcționează codul CSS specificat.

CSS - Center Align Block

1. Alinierea unui bloc la centrul altuia. În acest caz, primul și al doilea bloc au dimensiuni dinamice.

... ...

Părinte ( poziție: relativ; ) .copil ( poziție: absolut; stânga: 50%; sus: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform (-50%, -50%);

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni fixe.

Părinte (poziție: relativă; ) .copil (poziția: absolut; stânga: 50%; sus: 50%; /* lățime și înălțime a 2 blocuri */ lățime: 500px; înălțime: 250px; /* Valorile sunt determinate în funcție de pe dimensiunea sa */ /* margin-left = - lățime / 2 */ margin-left: -250px /* margin-top = - înălțime / 2 */ margin-top: -125px )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni specificate în procente.

Părinte ( poziția: relativ; ) .copil ( poziția: absolut; /* lățime și înălțime a 2 blocuri în % */ înălțime: 50%; lățime: 50%; /* Valorile se determină în funcție de mărimea acestuia în % * / stânga: 25% /* (100% - lățime) / 2 */ sus: 25% /* (100% - înălțime) / 2 */ ;

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Aliniere orizontală

1. Alinierea unui element bloc (afișare: bloc) față de altul (în care se află) pe orizontală:

... ...

Blocare ( margine-stânga: automat; margine-dreapta: automat; )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Alinierea orizontală a unui element de linie (display: inline) sau line-block (display: inline-block):

... ...

Părinte ( text-align: center; ) .child (afișare: inline-block; )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Aliniere verticală

1. Centrați un element (display: inline, display: inline-block) față de celălalt (în care se află) în centru. Blocul părinte din acest exemplu are o înălțime fixă, care este setată folosind proprietatea CSS line-height.

... ...

Părinte ( line-height: 500px; ) .child (afișare: inline-block; vertical-align: middle; )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Centrarea unui bloc față de altul pe verticală prin reprezentarea părintelui ca tabel, iar copilul ca o celulă a acestui tabel.

Părinte ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Dacă cunoașteți alte trucuri interesante sau soluții utile de aliniere gata făcute, atunci împărtășiți-le în comentarii.

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ă o casetă are 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%; )

Dacă tăiați orice site web creat pe baza html, veți vedea o anumită structură stratificată. Mai mult, aspectul său va fi asemănător cu un tort stratificat. Dacă așa crezi, atunci cel mai probabil nu ai mâncat de mult. Așa că mai întâi potoliți-vă foamea, apoi vă vom spune cum să centrați un strat div pe site-ul dvs.:

Avantajele aspectului folosind o etichetă

Există două tipuri principale de structură a site-ului web:

• Tabular;
• Bloc.

Aspectul tabelar era dominant chiar și în zorii Internetului. Avantajele sale includ precizia poziționării specificate. Dar, cu toate acestea, are deficiențe evidente. Principalele sunt lungimea codului și viteza scăzută de încărcare.

Când utilizați aspectul tabelului, pagina web nu va fi afișată până când nu este încărcată complet. În timp ce utilizați blocuri div, elementele sunt afișate imediat.

Pe lângă viteza mare de încărcare, blocarea unui site web vă permite să reduceți de mai multe ori cantitatea de cod HTML. Inclusiv prin utilizarea claselor CSS.

Cu toate acestea, aspectul tabelar ar trebui utilizat pentru a structura afișarea datelor pe pagină. Un exemplu clasic de utilizare a acestuia este afișarea tabelelor.

Construcția blocurilor bazată pe etichete este numită și strat cu strat, iar blocurile în sine sunt numite straturi. Acest lucru se datorează faptului că, atunci când sunt utilizate anumite valori de proprietate, acestea pot fi stivuite una peste alta, similar straturilor din Photoshop.

Ajutoare pentru poziționare

În aspectul bloc, este mai bine să poziționați straturile folosind foi de stil în cascadă. Principala proprietate CSS responsabilă pentru aspect este float.
Sintaxa proprietății:
float: stânga | dreapta | niciunul | moşteni
Unde:

• stânga – aliniați elementul la marginea din stânga a ecranului. Curgerea în jurul elementelor rămase are loc în dreapta;
• dreapta – aliniere la dreapta, curgere în jurul altor elemente – la stânga;
• nici unul – împachetarea nu este permisă;
• inherit – moștenește valoarea elementului părinte.

Să ne uităm la un exemplu ușor de poziționare a div-urilor folosind această proprietate:

#stânga ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,51,102); ) #right ( lățime: 200px; înălțime: 100px; float: dreapta; fundal: rgb(0,255,153); ) Bloc din stânga Blocul din dreapta

Acum vom încerca să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are o valoare centrală. Și când dați unui bloc nou o valoare de aliniere la dreapta sau la stânga, acesta este deplasat în direcția specificată. Prin urmare, tot ce rămâne este să setați float: lăsat la toate cele trei blocuri:

Dar nici aceasta nu este cea mai bună opțiune. Când fereastra este mai mică, toate straturile sunt aliniate pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Deci avem nevoie de o modalitate mai bună de a centra div-ul.

Straturi de centrare

În exemplul următor, vom folosi un strat de container în care vom plasa elementele rămase. Acest lucru rezolvă problema blocurilor care se mișcă unul față de celălalt atunci când dimensiunea ferestrei este modificată. Centrarea containerului în mijloc se face prin setarea proprietăților marginii la zero pentru marginile de la marginea superioară și automat pe părțile laterale (marja: 0 auto):

#container ( lățime: 600px; margine: 0 automat; ) #stânga ( lățime: 200px; înălțime: 100px; flotant: stânga; fundal: rgb(255,51,102); ) #dreapta ( lățime: 200px; înălțime: 100px; flotant : stânga; fundal: rgb(0,255,153); #center (lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,0,0); )

Același exemplu arată cum puteți centra un div pe orizontală. Și dacă editați ușor codul de mai sus, puteți obține alinierea verticală a blocurilor. Pentru a face acest lucru, trebuie doar să modificați lungimea stratului de container (reduceți-l). Adică, după editarea clasei sale css ar trebui să arate astfel:

După schimbare, toate blocurile se vor alinia strict într-un rând la mijloc. Și poziția lor nu se va schimba indiferent de dimensiunea ferestrei browserului. Iată cum arată centrarea verticală a unui div:

În exemplul următor, am folosit o serie de proprietăți CSS noi pentru a centra straturile în interiorul unui container:

#container ( lățime: 450 px; înălțime: 150 px; margine: 0 automat; culoarea fundalului: #66CCFF; ) # stânga ( lățime: 100 px; înălțime: 100 px; fundal: rgb(255,51,102); afișaj: bloc inline; vertical-align: middle; margin-left: 35px ) #right ( lățime: 100px; înălțime: 100px; fundal: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( lățime: 100px; înălțime: 100px; fundal: rgb(255,0,0); afișare: bloc inline; aliniere verticală: mijloc; margine-stânga: 35px; )

O scurtă descriere a proprietăților css și a valorilor lor pe care le-am folosit în acest exemplu pentru a centra un div într-un div:

• display: inline-block – aliniază un element bloc într-o linie și asigură că se înfășoară în jurul altui element;
• vertical-align: middle – aliniază elementul la mijloc în raport cu părintele;
• margin-left – setează marginea din stânga.

Cum se face o legătură dintr-un strat

Oricât de ciudat ar suna, acest lucru este posibil. Uneori, un bloc div ca link poate fi necesar atunci când amenajați diferite tipuri de meniuri. Să ne uităm la un exemplu practic de implementare a unui strat de legătură:

#layer1( lățime: 500px; înălțime: 100px; fundal: rgb(51.255.204); border:groove; ) a ( afișare: bloc; text-align: center; înălțime: 100%; culoare: rgb(255,0,51) ; ) Link către site-ul nostru

În acest exemplu, folosind linia de afișare: bloc, setăm legătura la valoarea unui element bloc. Și pentru ca întreaga înălțime a blocului div să devină o legătură, setați înălțimea: 100%.

Ascunderea și afișarea elementelor de bloc

Elementele bloc oferă mai multe oportunități de extindere a funcționalității interfeței decât aspectul tabelar învechit. Se întâmplă adesea ca designul site-ului web să fie unic și ușor de recunoscut. Dar pentru o astfel de exclusivitate trebuie să plătești din lipsă de spațiu liber.

Acest lucru este valabil mai ales pentru pagina principală, costul publicității pe care este cel mai mare. Prin urmare, se pune problema unde să „împingă” un alt banner publicitar. Și aici nu poți scăpa cu alinierea div-ului la centrul paginii!

O soluție mai rațională este să ascundă un bloc. Iată un exemplu simplu de astfel de implementare:

#layer1( display:block; lățime: 500px; înălțime: 100px; fundal: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="bloc"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

Acesta este butonul magic. Făcând clic pe el, va ascunde sau afișa blocul de ascundere.

În acest exemplu, locația blocurilor div nu se schimbă în niciun fel. Aceasta folosește o funcție JavaScript simplă care modifică valoarea proprietății de afișare css după ce se face clic pe un buton (eveniment onclick).

sintaxa de afișare:
afisare: bloc | în linie | inline-block | inline-table | articol-listă | niciunul | rulare | masa | table-caption | tabel-celula | tabel-coloană-grup | tabel-coloană | tabel-subsol-grup | tabel-antet-grup | masă-rând | tabel-rând-grup

După cum puteți vedea, această proprietate poate lua multe valori. Prin urmare, este foarte util și poate fi folosit pentru poziționarea elementelor. Într-unul dintre exemplele anterioare, am folosit una dintre valorile sale (inline-block) pentru a centra un div într-un div.

Am folosit două valori ale proprietăților de afișare pentru a ascunde și afișa stratul.

Câte copii au fost deja sparte despre sarcina de aliniere a elementelor pe pagină. Vă aduc în atenție o traducere a unui articol excelent cu o soluție la această problemă de la Stephen Shaw pentru Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Cu toții știam despre margine: 0 auto; pentru centrare orizontală, dar margine: auto; nu a funcționat pentru verticală. Acest lucru poate fi rezolvat cu ușurință prin simpla setare a înălțimii și aplicarea următoarelor stiluri:

Absolut-Center (marja: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )
Nu sunt primul care propune această soluție, dar această abordare este rar folosită pentru alinierea verticală. În comentariile la articolul Cum să centrați orice cu CSS, Simon trimite la un exemplu jsFiddle care oferă o soluție excelentă pentru centrarea verticală. Iată mai multe despre acest subiect.

Să aruncăm o privire mai atentă asupra metodei.

Avantaje

• Compatibilitate între browsere (inclusiv IE 8-10)
• Fără markup suplimentar, stil minim
• Adaptabilitate
• Independență față de umplutură (fără dimensiunea cutiei!)
• Funcționează pentru imagini

Defecte

• Trebuie specificată înălțimea (vezi Înălțimea variabilă)
• Este recomandat să setați overflow: automat pentru ca conținutul să nu se răspândească
• Nu funcționează pe Windows Phone

Compatibilitate browser Metoda a fost testată și funcționează excelent în Chrome, Firefox, Safari, Mobile Safari și chiar IE 8-10. Un utilizator a menționat că conținutul nu se aliniază vertical pe Windows Phone În interiorul unui container Conținutul plasat într-un container cu poziția: relativă se va alinia bine:

Absolut-Center ( lățime: 50%; înălțime: 50%; preaplin: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

Utilizarea ferestrei de vizualizare Setați conținutul la poziția: fix și setați indexul z:

Absolute-Center.is-Fixed ( lățime: 50%; înălțime: 50%; overflow: automat; margine: automat; poziție: fix; sus: 0; stânga: 0; jos: 0; dreapta: 0; z-index: 999)

Adaptabilitate Principalul avantaj al metodei descrise este că funcționează perfect atunci când înălțimea sau lățimea este specificată ca procent, și chiar înțelegerea min-width/max-width și min-height/max-height.

Absolute-Center.is-Responsive ( lățime: 60%; înălțime: 60%; lățime minimă: 400px; lățime maximă: 500px; umplutură: 40px; overflow: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; dreapta: 0;

Decalaje Dacă site-ul are un antet fix sau trebuie să faceți o altă indentație, trebuie doar să adăugați cod ca top: 70px la stiluri; În timp ce marginea este setată: automat; blocul de conținut va fi centrat corect în înălțime.

De asemenea, puteți alinia conținutul pe partea dorită, lăsând centrarea în înălțime. Pentru a face acest lucru, trebuie să utilizați dreptul: 0; stânga: auto; pentru alinierea la dreapta sau la stânga: 0; dreapta: auto; pentru alinierea la stânga.

Absolute-Center.is-Right ( lățime: 50%; înălțime: 50%; margine: automat; overflow: automat; poziție: absolut; sus: 0; stânga: automat; jos: 0; dreapta: 20px; text-align: dreapta;

O mulțime de conținut Pentru a ne asigura că o cantitate mare de conținut nu permite aspectului să diverge, folosim overflow: auto . Va apărea o bară de defilare verticală. De asemenea, puteți adăuga înălțimea maximă: 100%; dacă conținutul nu are umplutură suplimentară.
.Absolute-Center.is-Overflow ( lățime: 50%; înălțime: 300px; înălțime maximă: 100%; marjă: automat; overflow: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta : 0;

Imagini Această metodă funcționează grozav și pentru imagini! Adăugați înălțimea stilului: automat; apoi imaginea se va scala împreună cu containerul.

Absolute-Center.is-Image ( lățime: 50%; înălțime: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

Înălțime variabilă Metoda descrisă necesită o înălțime de bloc dată, care poate fi specificată ca procent și controlată folosind max-height, ceea ce face metoda ideală pentru site-urile receptive. O modalitate de a nu seta înălțimea este să utilizați display: table . În acest caz, blocul de conținut este centrat, indiferent de dimensiune.

Pot exista probleme cu compatibilitatea între browsere, poate că ar trebui să utilizați metoda tabel-celule (descrisă mai jos).

• Firefox/IE8: Utilizarea afișajului: tabelul aliniază blocul vertical la partea de sus a documentului.
• IE9/10: Folosind afișajul: tabelul aliniază blocul la colțul din stânga sus al paginii.
• Mobile Safari: Dacă lățimea este setată la procent, centrarea orizontală are de suferit

.Absolute-Center.is-Variable (afișare: tabel; lățime: 50%; overflow: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

Alte metode Metoda descrisă funcționează foarte bine în majoritatea cazurilor, dar există și alte metode care pot fi folosite pentru a rezolva probleme specifice Marja negativă Probabil cea mai populară metodă. Potrivit dacă dimensiunile blocului sunt cunoscute.

Este negativ ( lățime: 300px; înălțime: 200px; umplutură: 20px; poziție: absolut; sus: 50%; stânga: 50%; margine-stânga: -170px; /* (lățime + umplutură)/2 */ margin- sus: -120px /* (înălțime + umplutură)/2 */ )
Avantaje:

• Compatibilitate între browsere
• Cod minim

Defecte:

• Nu adaptiv
• Aspectul se strecoară dacă există prea mult conținut în recipient
• Trebuie să compensați umplutura sau să utilizați box-sizing: border-box

Utilizarea transform Una dintre cele mai simple metode, acceptă modificări de înălțime. Există un articol detaliat pe acest subiect - „Centrarea elementelor procentuale de lățime/înălțime” din CSS-Tricks.

Este transformat ( lățime: 50%; marjă: automat; poziție: absolut; sus: 50%; stânga: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%) transforma: translate(-50%,-50%);
Avantaje:

• Înălțime variabilă
• Cod minim

Defecte:

• Nu funcționează în IE 8
• Utilizarea prefixelor
• Poate interfera cu alte efecte de transformare
• În unele cazuri, marginile blocurilor și textul sunt neclare în timpul redării

Table-cell Poate una dintre cele mai bune și mai simple moduri. Descris în detaliu în articolul „Centrarea verticală pe înălțime flexibilă cu CSS, dincolo de IE7” de 456bereasttreet. Principalul dezavantaj este marcajul suplimentar: sunt necesare trei elemente:

<!-- CONTINUT -->
CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; vertical-align: middle; ) .is-Table .Center-Block ( lățime: 50%; marja: 0 auto;
Avantaje:

• Înălțime variabilă
• Aspectul nu funcționează când există o cantitate mare de text într-un bloc
• Compatibilitate între browsere

Defecte:

• Structură complexă

Flexbox Viitorul CSS, flexbox va rezolva multe dintre problemele de aspect de astăzi. Acest lucru este scris în detaliu într-un articol Smashing Magazine numit Centrarea elementelor cu Flexbox.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: -ms-flex-align: -webkit-align-items: center -ms-flex-pack; : centru; justificare-conținut: centru)
Avantaje:

• Conținutul poate avea orice înălțime sau lățime
• Poate fi folosit în cazuri mai complexe

Defecte:

• Nu există suport pentru IE 8-9
• Necesită container sau stiluri în corp
• Necesită o mare varietate de prefixe pentru a funcționa corect în browserele moderne
• Posibile probleme de performanță

Concluzie Fiecare metodă are avantaje și dezavantaje. În esență, alegerea se reduce la alegerea browserelor care ar trebui să fie acceptate