Как разместить элемент по центру css по вертикали

Абсолютное центрирование по горизонтали и вертикали в CSS

Абсолютное центрирование по горизонтали и вертикали в CSS

От автора: Все мы встречали margin: 0 auto; для выполнения горизонтального центрирования, но margin: auto; отказывался работать для вертикального… до сих пор! На самом деле абсолютное центрирование требует всего лишь объявленной высоты и этих стилей:

Я – не первопроходец этого метода (хотя и осмелился назвать его Absolute Centering), и, может быть, это обычная техника, однако большая часть статей о вертикальном центрировании никогда о нем не упоминают и я нигде не видел его до тех пор, пока не порылся в разделе комментариев одной статьи.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В ней Саймон (Simon) связал с ним jsFiddle, чем отмел все прочие способы (тот же метод упоминался в комментариях Приитом (Priit)). При дальнейших исследованиях мне пришлось применять очень специфические ключевые слова, чтобы отыскать несколько других источников этого метода. Никогда до того не пользовавшийся данной техникой, я протестировал ее и обнаружил, насколько абсолютное центрирование потрясающе в самом деле.

ПРЕИМУЩЕСТВА:

Кроссбраузерность (включая IE8-10)

Не требуется специальной разметки, минимум стилей

Адаптивно работает с процентными соотношениями и min-/max-

Один класс для центрирования любого контента

Центрирование вне зависимости от отступа (без box-sizing!)

Блокам можно легко менять размер

Отлично работает с изображениями

ПРЕДУПРЕЖДЕНИЕ:

Нужно заявлять высоту

Рекомендуется установка overflow: auto для предотвращения переливания содержимого

Не работает в Windows Phone

БРАУЗЕРНАЯ СОВМЕСТИМОСТЬ:

Chrome, Firefox, Safari, Mobile Safari, IE8-10.

Метод абсолютного центрирования тестировался и безупречно работает в последних версиях Chrome, Firefox, Safari, Mobile Safari и даже IE8-10.

Пояснение

После изучения спецификаций и документации вот как я понимаю принцип работы Absolute Centering:

В нормальном потоке содержимого margin: auto; равен ’0′ для верха и низа. W3.org: Если ‘margin-top’ или ‘margin-bottom’ установлены на ‘auto’, их используемое значение равно 0.

position: absolute; выводит блок из обычного потока содержимого, отображая остальной контент так, как будто этого блока тут не было. Developer.mozilla.org: …абсолютно позиционированный элемент вынимается из потока и, таким образом, не занимает пространства

Установка top: 0; left: 0; bottom: 0; right: 0; задает браузеру новый ограничивающий прямоугольник для блока. На этом этапе блок заполнит все доступное пространство в своем офсетном родительском элементе, который является телом body или контейнером position: relative;. Developer.mozilla.org: Для абсолютно позиционированных элементов свойства top, right, bottom и left определяют офсеты от края содержащего блока элемента (относительно которого позиционирован элемент).

Назначение блоку width или height препятствует занятию блоком всего доступного пространства и заставляет браузер посчитать margin: auto на основе нового ограничивающего прямоугольника. Developer.mozilla.org: Поле [абсолютно позиционированного] элемента затем располагается внутри этих офсетов.

Так как блок позиционирован абсолютно и, следовательно, вне нормального потока, браузер назначает подходящие значения margin-top и margin-bottom, центрируя элемент в ранее определенных границах.
W3.org: Если ни одно из трех [top, bottom, height] не установлено на ‘auto’: если и ‘margin-top’, и ‘margin-bottom’ стоят на ‘auto’, решите уравнение с тем дополнительным ограничивающим условием, что два поля получают равные значения. Иначе говоря: отцентрируйте блок по вертикали

Похоже, Absolute Centering – это предназначенное применение margin: auto; согласно спецификации и, следовательно, должно работать во всех браузерах, подчиняющихся стандартам.

TL;DR: Абсолютно позиционированные элементы не отображаются в нормальном потоке, поэтому margin: auto; центрирует по вертикали внутри границ, установленных top: 0; left: 0; bottom: 0; right: 0;.

CSS Layout — Horizontal & Vertical Align- выравнивание

Установка ширины элемента предотвратит его растяжение по краям контейнера.

Затем элемент будет занимать заданную ширину, а оставшееся пространство будет разделяться поровну между двумя полями:

Этот элемент div центрируется.

Пример

Примечание: Выравнивание по центру не действует, если свойство width не задано (или установлено на 100%).

Выравнивание текста по центру

Чтобы просто центрировать текст внутри элемента, используйте text-align: center;

Этот текст центрируется.

Пример

Совет: Дополнительные примеры выравнивания текста содержатся в разделе текст CSS.

Центрировать изображение

Чтобы центрировать изображение, установите левое и правое поле в auto и внесите его в block элемент:

Paris

Пример

Выравнивание по левому и правому краю-использование положения

Одним из способов выравнивания элементов является использование position: absolute; :

В моей младшей и более уязвимых лет мой отец дал мне несколько советов, которые я переворачивается в моей голове до сих пор.

Пример

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Выравнивание по левому и правому краю-использование float

Другим методом выравнивания элементов является использование свойства float :

Пример

Примечание: Если элемент выше, чем элемент, содержащий его, и он плавает, он будет переполнения за пределами своего контейнера. Вы можете использовать "clearfix" Хак, чтобы исправить это (см. пример ниже).

Clearfix Hack

Без Clearfix

С Clearfix

После этого мы можем добавить overflow: auto; к содержащему элементу для того чтобы зафиксировать эту проблему:

Пример

Центрировать вертикально-с помощью заполнения

Существует множество способов центрирования элемента по вертикали в CSS. Простое решение заключается в использовании верхнего и нижнего padding :

Я вертикально центрирован.

Пример

Для центрирования как по вертикали, так и по горизонтали используйте padding и text-align: center :

Я вертикально и горизонтально центрирован.

Пример

Центрировать вертикально-с помощью высоты линии

Еще одна хитрость заключается в использовании свойства line-height со значением, равным свойству height .

I am vertically and horizontally centered.

Пример

.center <
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
>

/* If the text has multiple lines, add the following: */
.center p <
line-height: 1.5;
display: inline-block;
vertical-align: middle;
>

Центрирование по вертикали-использование положения & Transform

Если padding и line-height не являются параметрами, третье решение заключается в использовании позиционирования и transform свойство:

Я вертикально и горизонтально центрирован.

Пример

.center <
height: 200px;
position: relative;
border: 3px solid green;
>

.center p <
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>

Совет: Вы узнаете больше о свойстве Transform в нашей главе 2D-преобразования.

Центрирование div по горизонтали и вертикали

При создании макета веб-страницы, вы, вероятно, сталкивались с ситуацией, когда вам нужно отцентрировать div по горизонтали и вертикали, используя CSS. Есть несколько способов с применением CSS и JQuery.

Но вначале основы:

Выравнивание по горизонтали средствами CSS

.class-name <
margin:0 auto;
width:200px;
height:200px;
>

Для центрирования div только по горизонтали, необходимо указать ширину и автоматическое значение для левого и правого margins (это сокращенная форма написания CSS-свойств). Этот метод работает на блочных элементов ( div, p, h1 и т. п.). Чтобы применить его для линейных элементов (например, гиперссылок и изображений), необходимо написать еще одно правило &#8212; display:block .

Выравнивание по горизонтали и вертикали средствами CSS

Одновременное центрирование div по по горизонтали и вертикали чуть более хитрое. Вам нужно заранее знать размеры div .

.class-name <
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
>

С помощью абсолютного позиционирования элементов, мы можем выдернуть его из потока и задать его позицию по отношению к окну браузера. Задав смещение div на 50% от левой и верхней части окна, мы центрируем левый верхний угол относительно страницы. Единственное, что нам осталось сделать, это сместить div влево и вверх на половину его ширины и высоты, задав отрицательные значения margin , чтобы он идеально располагался по центру.

Выравнивание по горизонтали и вертикали с помощью jQuery

Как уже говорилось, вышеуказанный метод CSS работает только с div -ом фиксированного размера. На помощь приходит JQuery:

// объявление функции:
$(window).resize(function() <
$(‘.class-name’).css( <
position:’absolute’,
left: ($(window).width() — $(‘.class-name’).outerWidth())/2,
top: ($(window).height() — $(‘.class-name’).outerHeight())/2
>);
>);
// вызов функции:
$(window).resize();

Функция вычисляет ширину окна в $(window).resize() всякий раз при каждом изменении размера окна пользователем. Мы используем outerWidth() и outerHeight() , потому что в отличие от обычной width() и height() , они добавляют padding и ширину border , возвращая размер. Наконец, мы адаптируем при изменении размеров окна и центрируем div при перезагрузке страницы.

Преимуществом использования этого метода является то, что вам заранее не нужно знать размер div -а. Основным недостатком является то, что этот метод будет работать только с включенным JavaScript.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *