Css Разделение центриране на хоризонтални и вертикални блокове

Когато създавате Разделение блок, със сигурност ще ви се сблъскате със ситуация, в която трябва да се уеднаквят си Разделение хоризонтално и вертикално, като се използва чист CSS. Например, когато се създава изскачащи форми. Има няколко начина да се реализират за центриране, а в тази статия ще говорим за любимото и лесно по моя начин, с помощта на CSS или JQuery.

Да започнем с това, основите:

Хоризонтално центриране на CSS

Това се прави просто, ние използваме марж за нашия Разделение блок.

За центриране на DIV само хоризонтално, което трябва да се определи широчината на блок (широчина), да се използва за автоматично собственост на тире (марж) в ляво и в дясно. Този метод ще работи за всички главни елементи (Разделение, P, h1, и така нататък ...). За да кандидатствате план на трасето за вградени елементи (линкове, изображения ...), трябва да се прилага дисплея на параметър: блок;

Хоризонтално и вертикално центриране на CSS

Центриране единица Разделение хоризонтално и вертикално в същото време, прехапа сложен. Трябва да знаете, че размерите на DIV преждевременно.

С абсолютно позициониране блок, ние можем да го премахнете от околните елементи и да се определи позицията си по отношение на размера на прозореца на браузъра. Преместете DIV с 50% в ляво и горната част на прозореца. Сега в горния ляв ъгъл на блока се намира в центъра на прозореца на браузъра. Div единица остава настроен в центъра на страницата, като го премести в своята половина ширина и остави половината от височината му нагоре. Ура! Снабдете се отлично центриране на блок чист CSS код.

Хоризонтално и вертикално центриране на JQuery

Както бе споменато по-рано - метод CSS центриране работи само с фиксирани размери. Ако размерите не са определени, помощта ще дойде метод JQuery:

Операция на този метод е да се изпълнява функция за преоразмеряване (), през линия $ (прозорец) .resize (). Тази функция работи, когато промените размера на прозореца на браузъра. Ние използваме outerWidth () и outerHeight (). защото за разлика от ширина () и височина (). те включват подложка и рамки в дебелина, която ги връща. Последният ред, процесът започва центриране натоварване Разделение страница единица.