Как отцентровать элемент по вертикали назвать хотя бы три способа

3 способа вертикального выравнивания блока по центру

У верстальщиков часто возникает ситуация, когда необходимо сделать элементу вертикальное выравнивание — расположить в центре экрана по оси Y. По умолчанию любые элементы на странице имеют верхнее-левое позиционирование.

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

Мы видим, что фиолетовый блок прижат к верхнему краю браузера. Расположим наш блок в центре по отношению к браузеру, который и будет выступать его родителем.

.block <
width: 120px;
height: 120px;
background: violet;
>

1) Свойство position (древний метод)

Если мы блок размещаем относительно браузера, то такое позиционирование называется абсолютным. Кажется логичным, что для вертикального центрирования будет достаточно поставить свойство top:50% и на этом все. При таком подходе не учитываются размеры самого блока, в центре окажется только верхняя его граница, а не сам блок.

Нужно сместить блок вверх на половину его собственной высоты, для этого в значении top пишем функцию calc и вычисляем нужную высоту. Отнимем от 50% половину высоты блока.

position: absolute;
left:0;
right:0;
margin: 0 auto; /* горизонтальное выравнивание */
top:calc(50%-50px); /* высота блока известна */
>

Вычисление через функцию calc работает когда известна высота блока. Но что делать, если высота неизвестна — внутри блока будет текст. Нам поможет свойство transform со значением translate, которое по оси Y сместит блок наполовину своей высоты. -50%. По оси X все останется как есть, если указать нулевое значение.

.block <
width: 120px;
position: absolute;
left:0;
right:0;
margin: 0 auto; /* горизонтальное выравнивание */
top:50%;
transform:translate(0, -50%); /* высота блока неизвестна */
>

2) Свойство flexbox (самый используемый метод)

Как растянуть по вертикали блок с неизвестной высотой, таким образом чтобы текст всегда оставался в центре по вертикали? Для этого зададим для родителя гибкий контейнер с несколькими флексовыми свойствами и теперь как бы мы не растягивали браузер, текст всегда будет оставаться в центре.

.block-flex <
width: 100px;
height: 100%;
background: violet;
color: #fff;
display: flex;
justify-content:center;
align-items:center;
>

Как быть в случае, когда блок имеет конкретную высоту (120 пикселей), а текст должен находится в центре блока? Нужно применить связку flexbox + position.

.block-flex <
width: 120px;
height: 120px;
background: violet;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: calc(50% — 50px);
left:0;
right:0;
margin: 0 auto;
>

3) Свойство grid (современный метод)

Еще один современный способ выравнивания — это grid, который в целом похож на flexbox способ с неизвестной высотой. При верстке макетов, вы чаще всего будете верстать блоки с неизвестной высотой.

.block-grid <
width: 120px;
height: 100%;
background: violet;
color: #fff;
display: grid;
justify-items:center;
align-items:center;
>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Как отцентровать элемент по вертикали назвать хотя бы три способа

Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.

Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также «за» и «против» каждого из них. Пример.

1-ый способ

Этот метод предполагает, что мы устанавливаем некоторому элементу

Плюсы

• Контент может динамически изменять высоту (высота не определена в CSS).
• Контент не обрезается в случае, если для него недостаточно места.

Минусы

• Не работает в IE 7 и меньше
• Много вложенных тэгов

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

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

Плюсы

• Работает во всех броузерах.
• Нет лишней вложенности.

Минусы

• Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

3-ий метод

В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

Плюсы

• Работает во всех броузерах.
• Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.

Минусы

• Думаю только один: что используется лишний пустой элемент.

4-ый метод.

Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

Плюсы

Минусы

• Не работает в Internet Explorer
• Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

Плюсы

• Работает во всех броузерах.
• Не обрезает текст, если он не влез.

Минусы

• Работает только с текстом (не работает с блочными элементами).
• Если текста больше чем одна строка, то выглядит очень плохо.

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

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Шаг 1

Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

• #floater (чтобы выровнять контент по центру)
• #centred (центральный элемент)
  • #side
    • #logo
    • #nav (список
      )
    • #content
  • #bottom (для копирайтов и всего такого)

  Напишем следующую html-разметку:

  Шаг 2

  Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.

  Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

  Нижний отступ для элемента «floater»-а равен минус половине высоты контента (400px), а именно -200px;

  Сейчас ваша страничка должна выглядеть приблизительно так:

  

  Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.

  Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.

  Шаг 3

  И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

  Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

  Обратите внимание, что затем мы указали чтобы ссылки отбражадись как блочные элементы. Теперь, при выводе, они растягиваются по всей ширине элемента в котором они расположены.

  Другая интересная вещь, которую мы использовали для меню — это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

  

  Шаг 4

  Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.

  В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.

  

  Совместимость

  Как вы уже наверное предположили, основной источник проблем совместимости — Internet Explorer:

  • Элементу #floater обязательно надо установить ширину
  • В IE 6 лишние отступы вокруг меню

  Источник

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

  В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.

  Горизонтальное

  text-align

  Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

  Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

  margin: auto

  Блок по горизонтали центрируется margin: auto :

  В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

  Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

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

  Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

  Есть три основных решения.

  position:absolute + margin

  Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

  Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.

  Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

  Если мы знаем, что это ровно одна строка, то её высота равна line-height .

  Приподнимем элемент на пол-высоты при помощи margin-top :

  При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

  Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

  Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

  Одна строка: line-height

  Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

  Это работает, но лишь до тех пор, пока строка одна, а если содержимое вдруг переносится на другую строку, то начинает выглядеть довольно уродливо.

  Таблица с vertical-align

  У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

  В таблицах свойство vertical-align указывает расположение содержимого ячейки.

  Его возможные значения:

  baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

  Например, ниже есть таблица со всеми 3-мя значениями:

  Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

  Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

  Этот способ замечателен тем, что он не требует знания высоты элементов.

  Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

  Чтобы его растянуть, нужно указать width явно, например: 300px :

  Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

  Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

  Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

  Центрирование в строке с vertical-align

  Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

  В этом случае набор значений несколько другой:

  Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

  Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

  Работает во всех браузерах и IE8+.

  Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

  Центрирование с vertical-align без таблиц

  Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .

  Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).

  • Перед центрируемым элементом помещается вспомогательный инлайн-блок before , занимающий всю возможную высоту.
  • Центрируемый блок выровнен по его середине.

  Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

  В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.

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

  Убрать лишний пробел между div и началом inner , будет

  Центрирование с использованием модели flexbox

  Данный метод поддерживается всеми современными браузерами.

  • Не требуется знания высоты центрируемого элемента.
  • CSS чистый, короткий и не требует дополнительных элементов.
  • Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

  Итого

  Обобщим решения, которые обсуждались в этой статье.

  Для горизонтального центрирования:

  • text-align: center – центрирует инлайн-элементы в блоке.
  • margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

  Для вертикального центрирования одного блока внутри другого:

  Если размер центрируемого элемента известен, а родителя – нет

  Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.

  Если нужно отцентрировать одну строку в блоке, высота которого известна

  Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

  Высота родителя известна, а центрируемого элемента – нет.

  Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

  Высота обоих элементов неизвестна.

  1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.
  1. Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
  2. Решение с использованием flexbox.

  Источник

  Читайте также:  Как решать задачи способом отношений