pro

• Conținutul se poate schimba dinamic înălțimea (înălțimea nu este definită în CSS).
• Conținutul nu este decupat dacă nu există suficient spațiu pentru el.

Minusuri

• Nu funcționează în IE 7 sau mai puțin
• Multe etichete imbricate

a 2-a metoda

Această metodă folosește poziționarea absolută a div-ului, care își setează vârful la 50% și marginea de sus minus jumătate din înălțimea conținutului. Aceasta implică faptul că obiectul trebuie să aibă o înălțime fixă, care este definită în stilurile CSS.

Deoarece înălțimea este fixă, puteți seta preaplin: auto; pentru div-ul care conține conținutul, deci dacă conținutul nu se potrivește, vor apărea bare de defilare.

pro

• Funcționează în toate browserele.
• Fără cuibări inutile.

Minusuri

• Când nu este suficient spațiu, conținutul dispare (de exemplu, div-ul este în interiorul corpului, iar utilizatorul a micșorat ferestrele, caz în care barele de defilare nu vor apărea.

a 3-a metoda

În această metodă, vom încheia conținutul div cu un alt div. Să-i setăm înălțimea la 50% (înălțime: 50%;), iar marginea de jos la jumătate din înălțime (margin-bottom: -contentheight;). Conținutul va șterge plutitorul și va fi centrat.

pro

• Funcționează în toate browserele.
• Când nu există suficient spațiu (de exemplu, când fereastra este redusă), conținutul nu este tăiat, vor apărea bare de defilare.

Minusuri

• Cred că un singur lucru: că se folosește un element gol suplimentar.

a 4-a metoda.

Această metodă utilizează proprietatea poziției: absolute; pentru div-uri cu dimensiuni fixe (lățime și înălțime). Apoi setăm coordonatele în partea de sus: 0; jos: 0; dar din moment ce are o înălțime fixă, nu se poate întinde și este centrat. Aceasta este foarte asemănătoare cu metoda binecunoscută de centrare orizontală a unui element bloc cu lățime fixă ​​(marja: 0 auto;).

pro

• Foarte simplu.

Minusuri

• Nu funcționează în Internet Explorer
• Conținutul va fi tăiat fără bare de defilare dacă nu există suficient spațiu în container.

a 5-a metoda

Puteți folosi această metodă pentru a alinia în centru o linie de text. Am stabilit doar înălțimea textului (linie-înălțime) egală cu înălțimea (înălțimea) elementului. După aceea, linia va fi afișată în centru.

pro

• Funcționează în toate browserele.
• Nu taie textul dacă nu se potrivește.

Minusuri

• Funcționează numai cu text (nu funcționează cu elemente de bloc).
• Dacă există mai multe rânduri de text, arată foarte rău.

Această tehnică este foarte utilă pentru articole mici, cum ar fi centrarea textului într-un buton sau casetă de text.

Acum că știți cum să obțineți alinierea verticală la centru, să creăm un site web simplu, care să arate astfel:

Pasul 1

Este întotdeauna bine să începeți cu marcaj semantic. Pagina noastră va fi structurată după cum urmează:

• #floater (pentru a alinia conținutul central)
• #centrat (element central)
  • #latură
    • #siglă
    • #nav (lista
    • #conţinut
  • #bottom (pentru drepturi de autor și altele)

  Să scriem următorul marcaj html:

  O companie

  • Acasă
  • Produse
  • Blog
  • a lua legatura
  • Despre

  Titlul paginii

  Reproiectează în mod holistic externalizarea cu valoare adăugată după colaborarea centrată pe proces și partajarea ideilor. Simplificați din punct de vedere energetic piețele de nișă cu impact prin imperativele activate. Predomină holistic inovația premium după scenarii convingătoare. Recaptiualizați fără probleme standardele înalte în capitalul uman cu produse fabricate de vârf. Distribuiți în mod distinct schemele conforme cu standardele înaintea vortalurilor robuste. Recaptiualizați în mod unic gradul de pregătire pentru web în raport cu informațiile disponibile.

  Titlul 2

  Îmbrățișați eficient pregătirea personalizată pentru web, mai degrabă decât procesele direcționate către client. Creșteți în mod asertiv imperativele multiplatforme față de tehnologiile proactive. Împuterniciți în mod convenabil meta-servicii multidisciplinare fără interfețe la nivel de întreprindere. Simplificați convenabil domeniile tematice strategice competitive cu piețe electronice concentrate. Sindicați fosfluorescent comunități de clasă mondială față de piețele cu valoare adăugată. Reinventează în mod corespunzător serviciile holistice înaintea serviciilor electronice robuste.

  Notificarea privind drepturile de autor ajunge aici

  Pasul 2

  Vom scrie acum cel mai simplu CSS pentru a poziționa elementele pe pagină. Trebuie să salvați acest cod în fișierul style.css. Pentru el este înregistrat linkul în fișierul html.

  Html, corp (marja: 0; umplutură: 0; înălțime: 100%;) corp (fond: url ("page_bg.jpg") 50% 50% no-repeat # FC3; font-family: Georgia, Times, serif; ) #floater (poziție: relativ; float: stânga; înălțime: 50%; margine-jos: -200px; lățime: 1px;) #centrat (poziție: relativ; clar: stânga; înălțime: 400px; lățime: 80%; max -lățime: 800px; lățime minimă: 400px; marjă: 0 automat; fundal: #fff; chenar: 4px solid # 666;) #jos (poziție: absolut; jos: 0; dreapta: 0;) #nav (poziție: absolut; stânga: 0; sus: 0; jos: 0; dreapta: 70%; umplutură: 20px; marjă: 10px;) #conținut (poziție: absolut; stânga: 30%; dreapta: 0; sus: 0; jos: 0; overflow: automat; înălțime: 340px; umplutură: 20px; margine: 10px;)

  Înainte de a ne putea centra conținutul, trebuie să setăm corpul și înălțimea html la 100%. Deoarece înălțimea este calculată fără margini interne și externe (padding și margin), le setăm (margini) la 0, astfel încât să nu existe bare de defilare.

  Umplutura inferioară pentru elementul „floater” -a este egală cu minus jumătate din înălțimea conținutului (400px), și anume -200px;

  Pagina ta ar trebui să arate acum cam așa:

  

  Lățimea elementului #centrat este de 80%. Acest lucru face ca site-ul nostru să fie deja pe ecrane mici și mai larg pe cele mari. majoritatea site-urilor arată obscene pe noile monitoare largi din colțul din stânga sus. Proprietățile min-width și max-width constrâng, de asemenea, pagina noastră, astfel încât să nu pară prea lată sau prea îngustă. Internet Explorer nu acceptă aceste proprietăți. Trebuie să setați o lățime fixă ​​pentru el.

  Deoarece elementul #centrat este setat la poziție: relativă, putem folosi poziționarea absolută a elementelor din el. Apoi setați preaplin: automat; pentru elementul #content, astfel încât să apară bare de defilare în cazul în care conținutul nu se va potrivi.

  Pasul 3

  Și ultimul lucru pe care îl vom face este să adăugăm câteva stiluri pentru a face pagina să arate puțin mai atractivă. Să începem cu meniul.

  #nav ul (list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0;) #nav li (padding: 0; margin: 3px;) #nav li a (afișare: bloc; culoare de fundal: # e8e8e8; umplutură: 7px; margine: 0; text-decor: niciunul; culoare: # 000; chenar-jos: 1px solid #bbb; text-align: right;) #nav li a :: after ( conținut: "" "; culoare: #aaa; font-weight: bold; afișare: inline; float: dreapta; margine: 0 2px 0 5px;) #nav li a: hover, #nav li a: focus (fundal: # f8f8f8; border-bottom-color: # 777;) #nav li a: hover :: after (marja: 0 0 0 7px; culoare: # f93;) #nav li a: activ (padding: 8px 7px 6px 7px;)

  Primul lucru pe care l-am făcut pentru a face meniul să arate mai bine a fost să eliminăm marcatorii setând atributul list-style la niciunul și, de asemenea, să setăm umplutură și umplutură, deoarece acestea sunt foarte diferite în mod implicit în diferite browsere.

  Rețineți că apoi am instruit linkurile să fie afișate ca elemente de bloc. Acum, când sunt afișate, ele se întind pe toată lățimea elementului în care se află.

  Un alt lucru interesant pe care l-am folosit pentru meniu este: înainte și: după pseudo-clase. Vă permit să adăugați orice înainte și după un element. Aceasta este o modalitate bună de a adăuga pictograme sau simboluri, cum ar fi o săgeată la sfârșitul fiecărui link. Acest truc nu funcționează în Internet Explorer 7 și mai jos.

  

  Pasul 4

  Nu în ultimul rând, vom adăuga câteva răsturnări de situație designului nostru pentru și mai multă frumusețe.

  #centrat (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;) h1, h2, h3, h4, h5, h6 (familie de fonturi: Helvetica, Arial, sans- serif; greutate font: normal; culoare: # 666;) h1 (culoare: # f93; margine de jos: 1px solid #ddd; spațiere între litere: -0,05em; greutate font: bold; margine de sus: 0; padding-top: 0;) #bottom (padding: 10px; font-size: 0.7em; culoare: # f03;) #logo (dimensiune font: 2em; text-align: center; culoare: # 999;) #logo puternic (greutate font: normal;) #logo span (afișare: bloc; dimensiune font: 4em; înălțime linie: 0,7 em; culoare: # 666;) p, h2, h3 (înălțime linie: 1,6 em;) a (culoare: # f03;)

  În aceste stiluri, setăm colțuri rotunjite pentru elementul #centrat. În CSS3, aceasta va fi responsabilitatea proprietății border-radius. Acest lucru nu este încă implementat de unele browsere, cu excepția utilizării prefixelor -moz și -webkit pentru Mozilla Firefox și Safari / Webkit.

  

  Compatibilitate

  După cum probabil ați ghicit, principala sursă de probleme de compatibilitate este Internet Explorer:

  • Elementul #floater trebuie setat la lățimea sa.
  • IE 6 are umplutură suplimentară în jurul meniurilor

  235.882 de vizualizări

  Centrarea elementelor pe verticală cu CSS este o provocare pentru dezvoltatori. Cu toate acestea, există mai multe metode de rezolvare, care sunt destul de simple. Această lecție prezintă 6 opțiuni pentru centrarea verticală a conținutului.

  Să începem cu o descriere generală a problemei.

  Problemă de centrare pe verticală

  Centrarea orizontală este foarte simplă și ușoară. Când elementul centrat este inline, utilizați proprietatea parent-align. Când elementul este bazat pe blocuri, îi setăm lățimea și setăm automat marginile din stânga și din dreapta.

  Majoritatea oamenilor, când folosesc proprietatea text-align:, se referă la proprietatea vertical-align pentru a centra vertical. Totul pare destul de logic. Dacă ați folosit șabloane tabulare, probabil că ați folosit foarte mult atributul valign, ceea ce întărește credința că alinierea verticală este calea corectă.

  Dar atributul valign funcționează numai pe celulele tabelului. Și proprietatea de aliniere verticală este foarte asemănătoare cu aceasta. De asemenea, afectează celulele tabelului și unele elemente inline.

  Valoarea proprietății de aliniere verticală acționează în raport cu elementul inline părinte.

  • Într-o linie de text, alinierea se realizează în raport cu înălțimea liniei.
  • Alinierea este utilizată în celula tabelului în raport cu valoarea calculată printr-un algoritm special (de obicei se obține înălțimea rândului).

  Din păcate, proprietatea de aliniere verticală nu are niciun efect asupra elementelor la nivel de bloc (de exemplu, paragrafele din interiorul unui element div). Această situație poate duce la ideea că nu există o soluție la problema alinierii verticale.

  Dar există și alte metode de centrare a elementelor bloc, a căror alegere depinde de ceea ce este centrat în raport cu containerul exterior.

  Metoda linie-înălțime

  Această metodă funcționează atunci când doriți să centrați vertical o linie de text. Tot ce trebuie să faceți este să setați înălțimea liniei să fie mai mare decât dimensiunea fontului.

  În mod implicit, spațiul liber va fi distribuit uniform în partea de sus și de jos a textului. Și linia va fi centrată vertical. Adesea, înălțimea liniei este egală cu înălțimea elementului.

  HTML:

  Textul dorit

  CSS:

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

  Această metodă funcționează în toate browserele, deși poate fi folosită doar pentru o singură linie. Valoarea de 200 px din exemplu este aleasă în mod arbitrar. Poate fi utilizată orice valoare mai mare decât dimensiunea fontului textului.

  Centrarea unei imagini folosind înălțimea liniei

  Ce se întâmplă dacă conținutul este o imagine? Va funcționa metoda de mai sus? Răspunsul se află într-o altă linie de CSS.

  HTML:

  

  CSS:

  #parent (linie-înălțime: 200px;) #parent img (aliniere verticală: mijloc;)

  Valoarea proprietății line-height trebuie să fie mai mare decât înălțimea imaginii.

  Metoda tabelelor CSS

  S-a menționat mai sus că proprietatea de aliniere verticală se aplică celulelor tabelului, unde funcționează excelent. Putem reda elementul nostru ca o celulă de tabel și să folosim proprietatea vertical-align pentru ca acesta să centreze vertical conținutul.

  Notă: Un tabel CSS nu este același lucru cu un tabel HTML.

  HTML:

  Conţinut

  CSS:

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

  Setăm rezultatul tabelar pentru div-ul părinte, iar div-ul imbricat este scos ca o celulă de tabel. Acum puteți utiliza proprietatea de aliniere verticală pe containerul interior. Totul din el va fi centrat vertical.

  Spre deosebire de metoda de mai sus, în acest caz conținutul poate fi dinamic, deoarece elementul div se va redimensiona pentru a se potrivi cu conținutul său.

  Dezavantajul acestei metode este că nu funcționează în versiunile mai vechi de IE. Trebuie să folosim proprietatea display: inline-block pentru containerul imbricat.

  Poziționare absolută și marje negative

  Această metodă funcționează și în toate browserele. Dar necesită ca elementului centrat să i se dea o înălțime.

  Exemplul de cod efectuează centrarea orizontală și verticală în același timp:

  HTML:

  Conţinut

  CSS:

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

  Mai întâi, setăm tipul de poziționare a elementelor. Apoi, pentru div imbricat, setați proprietățile de sus și stânga la 50%, care este centrul părintelui. Dar colțul din stânga sus al elementului imbricat este centrat. Prin urmare, trebuie să îl ridicați (jumătate din înălțime) și să îl mutați la stânga (jumătate din lățime), iar apoi centrul va coincide cu centrul elementului părinte. Deci cunoașterea înălțimii elementului este necesară în acest caz. Apoi setați elementul la marginile de sus și stânga negative egale cu jumătate din înălțime și, respectiv, lățime.

  Această metodă nu funcționează în toate browserele.

  Poziționare și întindere absolută

  Exemplul de cod efectuează centrarea verticală și orizontală.

  HTML:

  Conţinut

  CSS:

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

  Ideea din spatele acestei metode este de a întinde elementul imbricat la toate cele 4 margini ale elementului părinte prin setarea proprietăților de sus, jos, dreapta și stânga la 0.

  Setarea acestuia pentru a forma automat marginile pe toate părțile va seta valori egale pe toate cele 4 laturi și va face elementul nostru div imbricat centrat pe elementul părinte.

  Din păcate, această metodă nu funcționează în IE7 și mai jos.

  Margini de sus și de jos egale

  Această metodă stabilește în mod explicit marje egale deasupra și dedesubtul elementului părinte.

  HTML:

  Conţinut

  CSS:

  #părinte (padding: 5% 0;) #child (padding: 10% 0;)

  Exemplul de cod CSS stabilește marginile de sus și de jos pentru ambele elemente. Pentru un element imbricat, setarea căptușelii va servi pentru centrarea verticală. Și umplutura elementului părinte va centra elementul imbricat în el.

  Unitățile relative sunt folosite pentru a redimensiona în mod dinamic elementele. Iar pentru unitățile absolute vor trebui făcute calcule.

  De exemplu, dacă elementul părinte are 400 px înălțime și elementul imbricat este 100 px, atunci sunt necesare marginile de sus și de jos de 150 px.

  150 + 150 + 100 = 400

  Folosirea% permite ca calculele să fie lăsate în seama browserului.

  Această metodă funcționează peste tot. Dezavantajul este nevoia de calcule.

  Notă: Această metodă funcționează prin setarea căptușelii exterioare a unui element. De asemenea, puteți utiliza margini în cadrul unui element. Decizia de a folosi margini sau umplutură ar trebui luată în funcție de specificul proiectului.

  Div. plutitor

  Această metodă folosește un element div gol care plutește și ajută la controlul poziției elementului nostru imbricat în document. Rețineți că div-ul plutitor este poziționat înaintea elementului nostru imbricat în codul HTML.

  HTML:

  Conţinut

  CSS:

  #parent (înălțime: 250px;) #floater (float: stânga; înălțime: 50%; lățime: 100%; margin-bottom: -50px;) #copil (clar: ambele; înălțime: 100px;)

  Compensam div-ul gol la stânga sau la dreapta și îi setăm înălțimea la 50% din elementul părinte. În acest fel, va umple jumătatea superioară a părintelui.

  Deoarece acest div este plutitor, este eliminat din fluxul normal al documentului și trebuie să anulăm împachetarea textului pentru elementul imbricat. Exemplul folosește clar: ambele, dar este suficient să folosiți aceeași direcție ca și offset-ul elementului div vid plutitor.

  Marginea de sus a elementului div imbricat este direct sub marginea de jos a elementului div gol. Trebuie să mutăm elementul imbricat în sus cu jumătate din înălțimea elementului gol plutitor. Pentru a rezolva problema, utilizați o valoare negativă pentru proprietatea margin-bottom pentru un element div vid plutitor.

  Această metodă funcționează și în toate browserele. Cu toate acestea, utilizarea acestuia necesită un element div gol suplimentar și cunoașterea înălțimii elementului imbricat.

  Concluzie

  Toate metodele descrise sunt ușor de utilizat. Dificultatea este că niciuna dintre ele nu este potrivită pentru toate cazurile. Trebuie să analizați proiectul și să îl alegeți pe cel care se potrivește cel mai bine cerințelor.

  Cred că mulți dintre voi care ați făcut layout au dat peste nevoia de a alinia elementele pe verticală și știți ce dificultăți apar atunci când aliniați un element la centru.

  Da, pentru alinierea verticală, CSS are o proprietate specială de aliniere verticală cu mai multe valori. În practică, însă, 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 cu:

  • Mese,
  • liniuțe,
  • inaltimea liniei,
  • întindere,
  • marja negativa,
  • transforma,
  • pseudo-element,
  • flexbox.
  Ca o ilustrare, luați în considerare următorul exemplu.

  

  Există două div-uri, cu una imbricată în cealaltă. 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, luați în considerare cazul când dimensiunile unităților exterioare și interioare cunoscut... Să adăugăm display: inline-block la elementul interior și text-align: center și vertical-align: mijloc la cel exterior.

  Îmi amintesc că alinierea se aplică numai elementelor care au modul de afișare în linie sau bloc în linie.

  Să dăm blocurilor dimensiuni și culori de fundal pentru a le vedea 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. elementul în sine, nu conținutul său(cu excepția cazului în care se aplică celulelor tabelului). Prin urmare, aplicarea acestei proprietăți unui element extern nu a făcut nimic. Mai mult decât atât, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline 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.

  Aliniați-vă cu o masă

  Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu o masă cu o singură 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 punctul de vedere al semanticii, este greșit să folosiți tabele pentru aliniere. Al doilea dezavantaj este că pentru a crea tabelul, trebuie să adăugați un 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 (afișare: table;) .outer (afișare: table-cell;)
  Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.

  Aliniați cu indentări

  Dacă înălțimile casetelor interioare și exterioare sunt cunoscute, atunci alinierea poate fi setată folosind căptușeala verticală a casetei interioare 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 line-height și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu ar trebui 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: 200px; înălțime linie: 200px;) .interior (spațiu alb: nowrap; overflow: ascuns;)
  http://jsfiddle.net/c1bgfffq/12/

  De asemenea, puteți utiliza această tehnică pentru a alinia textul cu mai multe linii prin redefinirea valorii înălțimii liniei pentru blocul interior și adăugând afișaj: bloc în linie și aliniere verticală: reguli de mijloc.

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

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

  Alinierea întindere

  Această metodă poate fi utilizată atunci când înălțimea unității exterioare este necunoscută, dar este cunoscută înălțimea unității interioare.

  Pentru asta ai nevoie de:

  1. setați poziționarea relativă a blocului exterior, iar cea interioară - absolută;
  2. adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se întinde pe toată înălțimea blocului exterior;
  3. setat la automat pentru umplutura verticală a 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/

  Esența acestei tehnici este că specificarea înălțimii pentru o casetă întinsă și poziționată absolut obligă browserul să calculeze marginile verticale în proporții egale atunci când este setată la automat.

  Alinierea cu marginea negativă-top

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

  Trebuie să setați poziționarea relativă a blocului exterior, iar cea interioară - absolută. Apoi trebuie să împingeți cutia interioară în jos jumătate din înălțimea superioară a cutiei exterioare: 50% și să o ridicați până la jumătate din propria înălțime margine-sus: -H interioară / 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 aplicată 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;) .interior (poziție: absolut; vârf: 50%; transform: translateY (-50%);)
  http://jsfiddle.net/c1bgfffq/9/

  De ce nu a putut fi setat un procent în metoda anterioară? Deoarece valorile procentuale ale proprietății marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi 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 potrivită pentru asta.

  Dezavantajul acestei metode este că nu poate fi aplicată dacă blocul intern are poziționare absolută.

  Aliniați cu Flexbox

  Cel mai modern mod de a alinia 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ă, plasându-le aproape după cum doriți. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.

  Caseta exterioară trebuie setată să afișeze: flex, iar caseta interioară trebuie setată la margine: auto. Și e tot! Frumos, nu-i așa?

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

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

  Ce modalitate de a alege?

  Este necesar să pornim de la enunțul problemei:
  • Pentru alinierea verticală a textului, este mai bine să utilizați padding vertical sau proprietatea line-height.
  • Pentru elementele poziționate absolut cu o înălțime cunoscută (cum ar fi pictogramele), proprietatea 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 de transformare.
  • Ei bine, dacă ești atât de norocos încât nu trebuie să suporti versiuni mai vechi de IE, atunci bineînțeles că este mai bine să folosești Flexbox.

  Etichete: Adăugați etichete

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

  Beneficiile etichetării

  Există două tipuri principale de construire a unei structuri de șantier:

  • Tabular;
  • Blocky.

  Dispunerea tabelului a dominat încă de la începuturile internetului. Avantajele sale includ precizia poziționării specificate. Dar, cu toate acestea, are dezavantaje evidente. Principalele sunt volumul codului și viteza scăzută de descărcare.

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

  Pe lângă viteza mare de încărcare, construcția în bloc a site-ului permite de mai multe ori reducerea cantității de cod html. Inclusiv prin utilizarea claselor CSS.

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

  Construire bloc pe baza etichetelor

  numite și strat cu strat, iar blocurile în sine sunt straturi. Acest lucru se datorează faptului că atunci când utilizați anumite valori de proprietate, acestea pot fi stivuite una peste alta, ca straturi în Photoshop.

  Ajutoare pentru pozitionare

  În aspectul bloc, poziționarea stratului se face cel mai bine folosind foi de stil în cascadă. Principala proprietate CSS responsabilă de poziționare

  , este un plutitor.
  Sintaxa proprietății:
  float: stânga | dreapta | niciunul | moşteni,
  Unde:

  • stânga - aliniază elementul la stânga ecranului. Curgerea în jurul restului elementelor are loc în dreapta;
  • dreapta - alinierea la dreapta, curgerea în jurul altor elemente - la stânga;
  • none - nu este permisă împachetare;
  • 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:

  Blocul din stânga

  Blocul din dreapta

  
  

  Acum să încercăm să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are valoare centrală. Și când setați un nou bloc la valoarea de aliniere la dreapta sau la stânga, acesta este deplasat în direcția specificată. Prin urmare, rămâne doar 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 redusă, toate straturile sunt aranjate pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Prin urmare, este nevoie de o modalitate mai bună de a alinia centrarea div-ului.

  Straturi de centrare

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

  Blocul din stânga

  Bloc central

  Blocul din dreapta

  
  

  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 containerului (reduceți-l). Adică, după editarea css-ului, clasa 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 la nicio dimensiune a ferestrei browserului. Iată cum arată centrarea verticală a div-ului:

  
  

  În următorul exemplu, am folosit o serie de noi proprietăți CSS pentru a centra straturile în interiorul containerului:

  
  

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

  • display: inline-block - Aliniază un element de bloc la o linie și se asigură că este înfășurat în jurul altui element.
  • vertical-align: middle - aliniază elementul la mijloc față de părintele;
  • margin-left - setează marginea la stânga.

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

  Destul de ciudat sună, dar 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ă:

  Link către site-ul nostru

  
  

  În acest exemplu, folosind linia de afișare: bloc, setăm legătura cu valoarea elementului bloc. Și pentru a face din întreaga înălțime a blocului div o legătură, setați înălțimea: 100%.

  Ascunderea și afișarea elementelor de bloc

  Elementele bloc oferă mai multe opțiuni pentru extinderea funcționalității interfeței decât aspectul de tabel învechit. Se întâmplă adesea ca designul unui site 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 de pornire, care are cel mai mare cost de plasare a anunțurilor. Prin urmare, există o problemă în care să „împinge” un alt banner publicitar. Alinierea div-ului la centrul paginii nu este suficientă!

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

  Acesta este un buton magic. Făcând clic pe acesta, se va ascunde sau se va afișa blocul de ascundere.

  
  

  În acest exemplu, poziția blocurilor div nu se modifică în niciun fel. Aceasta este o funcție JavaScript simplă care modifică valoarea proprietății de afișare css după ce faceți clic pe butonul ( 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, folosind una dintre valorile sale ( inline-block) am implementat div-uri de aliniere centrală în interiorul div-urilor.

  Am folosit două valori pentru proprietatea de afișare pentru a ascunde și afișa stratul.

  Alinierea orizontală și verticală a elementelor se poate face în diferite moduri. Alegerea metodei depinde de tipul de element (bloc sau inline), de tipul de poziționare, dimensiuni etc.

  1. Alinierea orizontală la centrul blocului / paginii

  1.1. Dacă blocul are o lățime:

  div (lățime: 300px; margine: 0 automat; / * 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ă blocul este imbricat într-un alt bloc și nu este setată/setată lățimea pentru el:

  .wrapper (text-align: center;)

  1.3. Dacă blocul are o lățime și trebuie fixat în centrul blocului părinte:

  .wrapper (poziție: relativ; / * setați poziționarea relativă pentru caseta părinte, astfel încât ulterior să putem poziționa absolut caseta în interiorul acesteia * /) .box (lățime: 400px; poziție: absolut; stânga: 50%; margin- stânga: -200px; / * deplasați blocul la stânga cu o distanță egală cu jumătate din lățimea sa * /)

  1.4. Dacă nu este specificată lățimea pentru blocuri, puteți centra folosind blocul de înveliș părinte:

  .wrapper (text-align: center; / * poziționați conținutul blocului în centru * /) .box (display: inline-block; / * aranjați blocurile într-un rând orizontal * / margin-right: -0.25em ; / * eliminați indentația dreaptă dintre blocuri * /)

  2. Alinierea verticală

  2.1. Dacă textul se întinde pe un rând, de exemplu, pentru butoane și elemente de meniu:

  .button (înălțime: 50px; înălțime linie: 50px;)

  2.2. Pentru a alinia un bloc vertical într-un 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 (afișare: tabel; lățime: 100%;) .box (afișare: tabel-celulă; înălțime: 100px; text-align: center; vertical-align: middle;)

  2.4. Dacă un bloc are o lățime și o înălțime și trebuie să fie centrat pe blocul părinte:

  .wrapper (poziție: relativ;) .box (înălțime: 100px; lățime: 100px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; stânga: 0; margine: automat; overflow: automat; / * la conținutul nu s-a strecurat * /)

  2.5. Poziționarea absolută în centrul paginii/blocului folosind transformarea CSS3:

  dacă elementul este dimensionat

  div (lățime: 300px; / * setați lățimea blocului * / înălțimea: 100px; / * setați înălțimea blocului * / transform: translate (-50%, -50%); poziție: absolut; sus: 50%; stânga: 50% ;)

  dacă elementul nu este dimensionat și nu este gol

  Un text aici

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