Css div de centrare blocuri orizontale și verticale

Când creați un bloc div, cu siguranță, vă confruntați cu o situație în care aveți nevoie pentru a alinia div pe orizontală și pe verticală, folosind CSS pur. De exemplu, atunci când creați formulare de tip pop-up. Există mai multe modalități de a realiza centrarea, și în acest articol voi vorbi despre modul meu preferat și ușor, folosind CSS sau jQuery.

Pentru a începe cu, elementele de bază:

centrare orizontală pe CSS

Acest lucru se face pur și simplu, vom folosi marja pentru blocul nostru div.

Pentru centrarea div numai pe orizontală, aveți nevoie pentru a determina lățimea blocului (lățime), utilizați proprietatea auto indentare (marja) pe partea stângă și dreaptă. Această metodă va funcționa pentru toate elementele bloc (div, p, H1, și așa mai departe ...). Pentru a aplica alinierea orizontală pentru elementele inline (link-uri, imagini ...), trebuie să se aplice pe ecran parametrul: bloc;

centrare pe orizontală și verticală pe CSS

Centrarea unitate de div orizontal și vertical, în același timp, bit întortocheată. Trebuie să știi dimensiunile div prematur.

Cu bloc de poziționare absolută, putem elimina din elementele din jur și să definească poziția sa în raport cu dimensiunea ferestrei browser-ului. Mutați div cu 50% din partea stângă și partea de sus a ferestrei. Acum, în colțul din stânga sus al blocului este situat în centrul ferestrei browser-ului. Unitatea de Div rămâne fixată la centrul paginii mutând-o jumătate din lățimea sa și a lăsat jumătate din înălțimea sa în sus. Ura! Se obține excelent bloc de centrare pe codul css pur.

Orizontală și verticală centrarea pe jQuery

Așa cum am menționat mai devreme - metoda CSS centrarea funcționează numai cu dimensiuni fixe. În cazul în care nu sunt specificate dimensiunile, ajutorul va veni metoda jQuery:

Funcționarea acestei metode este de a rula o funcție de redimensionare (), prin intermediul liniei $ (fereastră) .resize (). Această caracteristică funcționează ori de câte ori redimensiona fereastra browser-ului. Noi folosim outerWidth () și outerHeight (). deoarece, în contrast cu lățime () și înălțimea (). ele includ padding și cadre într-o dimensiune grosime care le returnează. Ultima linie, procesul începe de centrare de încărcare a paginii div unitate.