Как сделать блок по центру по вертикали в css

Как выровнять блок по вертикали?

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать блок по центру по вертикали в css

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

Центрирование горизонтальное

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

Современный способ центрировать все, что не является текстом. Где любой находящийся элемент внутри #desanikam автоматически будет горизонтально центрирован.

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

margin-left: 0 auto; идет для сокращение:

Не забудьте установить display: block если это встроенный элемент.

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

Традиционно это всегда была сложнее задача, в отличие от остальных сложной задачей. Flexbox теперь предоставляет нам отличный способ сделать это самым простым способом.

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

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

То же самое можно сделать с помощью CSS Grid:

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

[info]Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.
[/info]

Выравнивание блока по центру на CSS

Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

Браузеры, которые поддерживают данное решение:

— Chrome 1.0+
— Firefox 1.0+
— Internet Explorer 4.0+
— Opera 7.0+
— Safari 1.0+

Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

Браузеры, которые поддерживают данное решение:

— Chrome 1.0+
— Firefox 1.0+
— Internet Explorer 4.0+
— Opera 7.0+
— Safari 1.0+

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

1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:

Браузеры, которые поддерживают данное решение:

— Chrome 1.0+
— Firefox 1.0+
— Internet Explorer 6.0+
— Opera 3.5+
— Safari 1.0+

2. Выравнивание строчного (display: inline) или построчно или блочного (display: inline-block) элемента по горизонтали:

Браузеры, которые поддерживают данное решение:

— Chrome 1.0+
— Firefox 3.0+
— Internet Explorer 8.0+
— Opera 7.0+
— Safari 1.0+

CSS — Выравнивание по вертикали

1. Отцентровать один элемент (display: inline, display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height.

2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.

Все современные и обновленные версий браузеры поддерживают данные решение.

Центрирование 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 не будет опубликован. Обязательные поля помечены *