Pe vremea tabelelor era relativ usor sa obtii un layout centrat relativ in pagina: faceai un tabel cu un rand si o celula, setai celula respectiva sa fie aliniata centrat si pe orizontala si pe verticala, si in ea mai bagai un al doilea tabel in care faceai apoi varza cu carne. Usor si frumos. Dar treaba asta niciodata nu mergea in NS, pentru simplul motiv ca NS accepta 100% ca inaltime doar pentru primul nivel de tabelare. De la al doi-lea nivel de tabelare in jos NS o ia razna cu totul in ceea ce priveste inaltimea tabelelor. Ma rog, asta se intampla pe vremea cand maai existau oameni care sa foloseasca NS, si cand se facea caz pe seama lor. Not anymore.

Dar problema ramane. De ce? Pentru ca alinierea pe verticala este o proprietate specifica NUMAI anumitor elemente HTML. DIV-ul NU e unul din ele. Ce te faci atunci?

Pai… depinde. Ai nu una ci doua solutii, in functie daca vrei ca div-ul tau sa aiba inaltime fixa sau relativa la inaltimea paginii. Indiferent cum vine cazul, principiul de baza e ca div-ul cu pricina trebuie sa-l bagi intr-un context clar definit ca position, indiferent ca e relative sau absolute. Sa le luam pe rand…

1. DIV centrat vertical in pagina, cu inaltime relativa la inaltimea paginii.…

cam simplu 🙂 Se seteaza div-ul din css, cu urmatorii parametri:

position: absolute; height: x%; top: ((100-x)/2)%;

Bine, ce am scris eu aici e un EXEMPLU, fratilor. NU incerca asa ceva acasa, ca n-o sa mearga. Ca sa vezi cam cum ar arata ceva de genul asta in rea-l live, uite un exemplu mai exemplificator:

position: absolute; height: 40%; top: 30%;

Daca ai nelamuriri, baga un comentariu si le lamurim.

2. DIV centrat vertical in pagina, cu inaltime fixa.

Asta poate sa para mai tricky… dar e rezolvabil. Inainte de toate, cream un DIV “dummy”, pe care-l definim in modul urmator:

.dummy {position: absolute; top: 50%;}

Div-ul asta, in mod clar, va sta (va avea originea) exact la mijlocul verticalei paginii. Pasul doi este sa cream in interiorul lui dummy DIV-ul care ne intereseaza pe noi, si care sa zicem ca vrem sa aiba inaltimea X. Parametrii lui in CSS vor arata asa:

position: absolute; height: Xpx; top: (-X/2)px;

Repet, pentru ca mai sus: asta e un exemplu de tip formula. Acelasi lucru, exemplificat mai concret, ar arata cam asa:

position: absolute; height: 300px; top: -150px;

Problema rezolvata!

Nota 1: Pentru cine nu intelege cum merge treaba cu position:absolute si cam ce presupune aceeasi treaba, recomand cu caldura articolul Elemente pozitionate ABSOLUTE in context RELATIVE.
Nota 2: Pentru cine se loveste de probleme legate de alinierea pe orizontala sau de width, ia cu paine de-aici: DIV-uri centrate in pagina: atentie la MARGIN.
Nota finala: Parametrii pe care i-am dat in exemplele de mai sus reprezinta STRICTUL NECESAR functionarii trebii respective. Evident ca esti liber sa adaugi de la tine orice si oricati parametri suplimentari vrei, pornind de la banalul width si mergand pana la cele mai rele hackuri CSS pe care le stii tu. Evident, restul nu ma mai priveste si e treaba ta. 🙂