6 методов вертикального центрирования с помощью CSS .


Содержание

Каскадные таблицы стилей CSS советы & приёмы

Смотрите также указатель всех приёмов работы.

Центрирование

В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

  • Выравнивание по вертикали в уровне 3
  • Выравнивание по вертикали и горизонтали в уровне 3
  • Выравнивание в области просмотра в уровне 3

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

которое отображает каждую строку в абзаце P или заголовке H2 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

Следующее изображение центрировано:

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

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

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

таблица стилей выглядит так:

Основные правила:

  1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
  2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
  3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
  4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное и горизонтальное центрирование в CSS уровня 3

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

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

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

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Created 5 May 2001;
Last updated Вт 05 ноя 2020 19:12:56

Все способы вертикального выравнивания в CSS. Выравнивание DIV по центру

Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью 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-разметку:

    A Centred Company

    • Home
    • Products
    • Blog
    • Contact
    • About

    Page Title

    Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. Energistically simplify impactful niche markets via enabled imperatives. Holisticly predominate premium innovation after compelling scenarios. Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. Distinctively syndicate standards compliant schemas before robust vortals. Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.

    Heading 2

    Efficiently embrace customized web-readiness rather than customer directed processes. Assertively grow cross-platform imperatives vis-a-vis proactive technologies. Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces. Conveniently streamline competitive strategic theme areas with focused e-markets. Phosfluorescently syndicate world-class communities vis-a-vis value-added markets. Appropriately reinvent holistic services before robust e-services.

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

    В 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.

    Как сделать вертикальное выравнивание css. Способы вертикального выравнивания по центру в CSS


    Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

    Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

    1. Представить блочный элемент как ячейку таблицы (display: table-cell ).
    2. IE6-7: метод expression.
    3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
    4. Позиционирование при помощи внешнего блока (position:absolute ).

    Ну а подведя итоги, рассмотрим еще один метод:

    5. Выравнивание с помощью свойства vertical-align.

    display: table-cell

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

    Вертикальное выравнивание. Способ display: table-cell

    Css центрирование по вертикали. Способы вертикального выравнивания по центру в CSS

    Выравнивание элементов на веб-странице может оказаться не такой легкой задачей, особенно если речь идет об выравнивание текста по вертикали. Этот вопрос часто встречается на форумах, и особую трудность решение этого вопроса вызывает у начинающих пользователей. Но на самом деле здесь сложного ничего нет. Все что нужно, это немного владеть знаниями каскадной таблицы стилей CSS. Так как это все делается за счет ее правил.

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

    Первый метод с line-height

    Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height .

    первый пример. демо №1

    первый пример. демо №1

    Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .

    Выравнивание со свойством position

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

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

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

    Выравнивание со свойством table

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

    применять не будет, а воспользуемся свойствами CSS, такими как display: table; , display: table-cell; . В старых версиях IE данный способ не работает, да и не нужно. Ими, вообще, еще кто-то пользуется?

    Выравнивание со свойством flex

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

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

    Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

    Сравним следующие подходы. Выравнивание с помощью:

    • таблицы,
    • отступов,
    • line-height ,
    • растягивания,
    • отрицательного margin ,
    • transform ,
    • псевдоэлемента,
    • flexbox .

    В качестве иллюстрации рассмотрим следующий пример.

    Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

    Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

    Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

    Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

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

    Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

    Выравнивание с помощью таблицы

    http://jsfiddle.net/c1bgfffq/1/

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

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

    Выравнивание с помощью отступов

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

    Выравнивание с помощью line-height

    Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

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

    Выравнивание с помощью «растягивания»

    Для этого нужно:

    1. задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
    2. добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
    3. установить значение auto для вертикальных отступов внутреннего блока.

    .outer < position: relative; >.inner < height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; >
    http://jsfiddle.net/c1bgfffq/4/

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

    Выравнивание с помощью отрицательного margin-top

    Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

    Минус данного способа — должна быть известна высота внутреннего блока.

    Выравнивание с помощью transform

    Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

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

    Выравнивание с помощью Flexbox

    Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

    Минус данного способа − Flexbox поддерживается только современными браузерами.

    Какой способ выбрать?

    Теги: Добавить метки

    У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали ? И это вызывает определенные проблемы. Однако существует несколько методов для центрирования элементов по вертикали и каждый из этих методов достаточно прост. В этой статьи описаны некоторые из этих методов.

    Чтобы увидеть каждый метод в действии, кликните по кнопке демо или по изображению.

    Давайте обсудим некоторые моменты, которые препятствуют вертикальному центрированию.

    Vertical-Align

    Горизонтальное центрирование элемента достаточно легко реализовать (с помощью CSS). Встроенный элемент (inline) можно центрировать по горизонтали, назначив родительскому контейнеру свойство text-align со значением center . Когда элемент блочный, для центрирования ему достаточно задать ширину (width) и установить значения правого (margin-right) и левого (margin-left) поля на auto .

    Относительно к тексту: многие для центрирования начинают использовать свойство vertical-align . Это логично и мой первый выбор был бы таким же. Чтобы центрировать элемент в таблице, можно использовать атрибут valign .

    Однако атрибут valign работает только применительно к ячейке (например, ). Свойство CSS vertical-align можно применить к ячейке и к некоторым встроенным элементам.

    • Текст центрируется относительно line-height (межстрочный интервал).
    • Применительно к таблице, если не вдаваться в детали, центрирование происходит относительно высоты ряда.

    К сожалению, свойство vertical-align нельзя применять к блочным элементам, например, таким как параграф (p) внутри тега div .


    Однако существуют другие методы центрирования элементов по вертикали, и вы по-прежнему можете использовать свойство vertical-align там, где это необходимо. Какой метод использовать зависит от того, что вы собираетесь центрировать.

    Межстрочный интервал или Line-height

    Данный метод стоит использовать только тогда, когда вам нужно центрировать строчку текста. Для этого необходимо у элемента, который содержит текст, установить line-height (межстрочный интервал) больше чем размер шрифта.

    По умолчанию образуется равное пространство над и под текстом, таким образом, текст центрируется по вертикали.

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

    Данный метод работает во всех браузерах, однако не забывайте, что его стоит использовать для строчки текста. Если ваш текст занимает более одной строки, примените другой метод. Значение свойства line-height может быть любым, но не меньше чем высота шрифта. На практике данный метод отлично подходит для центровки горизонтального меню.

    CSS Метод с использованием свойств таблиц

    Как я уже писал, содержимое ячейки можно центрировать с помощью свойства CSS vertical-align . Родительский элемент необходимо представить как таблицу, дочерний элемент обозначим как ячейку и применим к нему свойство vertical-align со значением middle . Таким образом, любой контент в элементе-потомке будет центрирован по вертикали. Css код приведен ниже.

    К сожалению, данный метод не работает в старых версиях браузера IE. Если вам требуется поддержка браузера IE6 и ниже, добавьте объявление display: inline-block дочернему элементу.

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

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

    Ниже приведен код, где дочерний элемент центрирован с помощью данного метода.

    Для начала необходимо позиционировать родительский и дочерний элемент. Затем мы назначаем смещение дочернего элемента на 50% относительно верха (top) и левой стороны (left) элемента родителя, тем самым мы центрируем дочерний элемент относительно родительского. Однако наши манипуляции поставят верхний правый угол дочернего элемента по центру элемента родителя, что нас, конечно, не устраивает.

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

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

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

    Абсолютное позиционирование дочернего элемента

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

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

    Идея данного метода в том, что можно позиционировать дочерний элемент, используя значения свойств top , left , right , bottom равные 0. Так как наш элемент-потомок меньше родительского элемента, он не сможет «прилипнуть» к элементу родителю.

    Значения полей для всех четырех сторон дочернего элемента равны нулю, благодаря этому элемент центрируется по вертикали относительно родителя. К сожаления данный метод имеет те же недостатки, что и предыдущий метод: необходимо фиксировать высоту и ширину потомка, отсутствие поддержки старых браузеров IE.

    Нижний и верхний отступы равны

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

    Я использую относительные размеры. Если размеры блоков зафиксированы, то понадобится произвести некоторые математические расчеты.

    Например, если элемент-родитель имеет высоту 400px, а дочерний 100px, то следует установить верхний и нижний отступ по 150px.

    150 + 150 + 100 = 400

    Плавающий div

    В этом методе задействован пустой плавающий (float) блок, который контролирует вертикальное положение дочернего элемента. Плавающий блок div необходимо поставить перед дочерним элементом, смотрите код HTML ниже.

    Сначала мы сдвигаем плавающий блок влево (или вправо) и назначаем ему высоту 50% от родительского элемента. Таким образом, плавающий блок заполнит верхнюю половину родительского элемента.

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

    Сейчас верхний край дочернего элемента лежит непосредственно под нижним краем плавающего элемента. Нам требуется приподнять дочерний элемент на половину высоты плавающего элемента. Для этого достаточно установить для плавающего блока отрицательное нижнее поле равное 50%.

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

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

    Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.

    В качестве примера рассмотрим следующий фрагмент:

    и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.

    Решение задачи

    «Правильные» браузеры (включая MSIE

    Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:

    div <
    display: table-cell;
    vertical-align: middle;
    >

    div <
    display: table-cell;
    vertical-align: bottom;
    >

    Internet Explorer (до 7-й версии включительно)

    Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):

    div <
    position: relative;
    >
    div span <
    display: block;
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    >

    Этот набор правил работает и в «правильных» браузерах.

    Div span <
    display: block;
    width: 100%;
    >

    не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center ;.

    Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить — введём ещё один строковый элемент:

    Материал для изучения:

    • Vertical Centering in CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
    • Vertical centering using CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
    • Vertical align (www.cssplay.co.uk/ie/valign.html)
    • vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
    • Еще один способ вертикального выравнивания в CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

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

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

    Часто в декоративных целях требуется задать тексту выравнивание по центру, CSS в этом случае позволяет сократить время верстки. Раньше это делалось с помощью HTML-атрибутов, теперь же стандарт требует выравнивать текст с помощью таблиц стилей. В отличие от блоков, для которых нужно изменять внешние отступы, в CSS выравнивание текста по центру производится с помощью одной строки:

    Это свойство наследуется и передается от родителя всем потомкам. Влияет не только на текст, но и на другие элементы. Для этого они должны быть строчными (например, span) или строчно-блочными (любые блоки, которым задано свойство display: block). Последний вариант позволяет также изменять ширину и высоту элемента, более гибко настраивать отступы.

    Часто на страницах align приписывают к самому тегу. Это сразу делает код невалидным, так как W3C признал атрибут align устаревшим. Использование его на странице не рекомендуется.

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

    Если нужно задать выравнивание div по центру, CSS может предложить довольно удобный способ: использование внешних отступов margin. Отступы можно задавать как блочным элементам, так и строчно-блочным. Значение свойсва должно принимать значения 0 (отступы по вертикали) и auto (автоматические отступы по горизонтали):

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

    Выравнивание блока по левому или правому краю

    Иногда выравнивание по центру CSS-способом не требуется, зато надо поставить два блока рядом: один с левого края, другой — с правого. Для этого существует свойство float, которое может принимать одно из трех значений: left, right или none. Допустим, у вас есть два блока, которые надо поставить рядом. Тогда код будет таким:

    Если есть еще и третий блок, который должен располагаться под первыми двумя блоками (например, футер), то ему необходимо прописать свойство clear:

    Дело в том, что блоки с классами left и right выпадают из общего потока, то есть все остальные элементы игнорируют само существование выравненных элементов. Свойство clear:both позволяет футеру или любому другому блоку видеть выпавшие из потока элементы и запрещает обтекание (float) как слева, так и справа. Поэтому в нашем примере футер сместится вниз.

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

    Бывают случаи, когда недостаточно задать выравнивание по центру CSS-способами, необходимо еще изменить вертикальное положение дочернего блока. Любой строчный или строчно-блочный элемент может быть прижат к верхнему или нижнему краю, находиться посередине родительского элемента или находиться в произвольном месте. Чаще всего требуется выравнивание блока по центру, для этого используется атрибут vertical-align. Допустим, есть два блока, один вложен в другой. При этом внутренний блок — строчно-блочный элемент (display: inline-block). Необходимо выровнять блок child по вертикали:

    • выравнивание по верхней границе — .child;
    • выравнивание по центру — .child;
    • выравнивание по нижней границе — .child;

    На блочные элементы ни text-align, ни vertical-align не действуют.

    Возможные проблемы с выровненными блоками

    Иногда выравнивание div по центру CSS-способом может вызвать небольшие проблемы. Например, при использовании float: допустим, есть три блока: .first, .second и.third. Второй и третий блоки лежат в первом. Элемент с классом second выровнен по левому краю, а последний блок — по правому. После выравнивания оба выпали из потока. Если у родительского элемента не задана высота (например, 30em), то он перестанет растягиваться по высоте дочерних блоков. Чтобы избежать этой ошибки, используют «распорку» — специальный блок, который видит.second и.third. CSS-код:


    Часто используются псевдокласс:after, который тоже позволяет вернуть блоки на место с помощью создания псевдораспорки (в примере в div с классом container лежит внутри.first и содержит.left и.right):

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

    Другая проблема, с которой часто сталкиваются верстальщики, — выравнивание строчно-блочных элементов. После каждого из них автоматически добавляется пробел. Справиться с этим помогает свойство margin, которому задается отрицательный отступ. Есть и другие способы, которые используются значительно реже: например, обнуление В этом случае в свойствах родительского элемента прописывается font-size:0. Если внутри блоков располагается текст, то в свойствах строчно-блочных элементов уже возвращается нужный размер шрифта. Например, font-size:1em. Способ удобен не всегда, поэтому гораздо чаще используется вариант со внешними отступами.

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

    Способы вертикального выравнивания по центру в CSS. Все про CSS выравнивание

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

    Начнем с общего описания задачи.

    Задача вертикального центрирования

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

    Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

    Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

    Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

    Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

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

    Метод line-height

    Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать — это задать высоту строки больше, чем размер шрифта.

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

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

    Центрирование изображения с помощью line-height

    А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.

    Значение свойства line-height должно быть больше высоты изображения.

    Метод таблиц CSS

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

    Примечание: Таблица CSS не является тем же, что и HTML таблица.

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

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

    Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

    Абсолютное позиционирование и отрицательные поля

    Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.

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

    Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

    Данный метод работает не во всех браузерах.

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

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

    Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

    Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

    К сожалению, данный метод не работает в IE7 и ниже.

    Равные отступы сверху и снизу

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

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

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

    Например, если родительский элемент имеет высоту 400 px, а вложенный элемент — 100px, то необходимы отступы 150px сверху и снизу.

    150 + 150 + 100 = 400

    Использование % позволяет расчеты оставить браузеру.

    Данный метод работает везде. Обратной стороной является необходимость в расчетах.

    Примечание: Данный метод работает за счет установки внешних отступов элемента. Вы можете также использовать поля внутри элемента. Решение о применении полей или отступов нужно принимать в зависимости от специфики проекта.

    Плавающий div

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

    Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

    Так как данный div является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both , но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div .

    Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

    Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.

    Заключение

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

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

    Преимущества верстки с помощью тега

    Существует два основных типа построения структуры сайта:

    Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.

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

    Кроме высокой скорости загрузки блочное построение сайта позволяет в несколько раз уменьшить объем кода html . В том числе и за счет использования классов CSS .

    Тем не менее, табличную верстку следует использовать для структуризации отображения данных на странице. Классическим примером ее применения является отображение таблиц.

    Блочное построение на основе тегов

    Средства позиционирования

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

    • left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
    • right – выравнивание справа, обтекание остальными элементами – слева;
    • none – обтекание не допускается;
    • inherit – наследование значения родительского элемента.

    Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:

    Как вертикально центрировать div для всех браузеров?


    Я хочу div вертикально с помощью CSS. Мне не нужны таблицы или JavaScript, но только чистый CSS. Я нашел некоторые решения, но им не хватает поддержки Internet Explorer 6.

    Как я могу div вертикали во всех основных браузерах, включая Internet Explorer 6?

    Ниже приведено лучшее универсальное решение, которое я мог бы построить для центрирования по вертикали и горизонтали в центре содержимого с фиксированной шириной и гибкой высотой. Он был протестирован и работает для последних версий Firefox, Opera, Chrome и Safari.

    Я встроил некоторый динамический контент для проверки гибкости и хотел бы знать, если кто-нибудь видит какие-либо проблемы с ним. Он должен хорошо работать и для центрированных оверлеев — лайтбокс, всплывающее окно и т.д.

    Еще один, который я не вижу в списке:

    • Кросс-браузер (включая Internet Explorer 8 — Internet Explorer 10 без хаков!)
    • Отзывчивая с процентами и min-/max-
    • Центрируется независимо от заполнения (без размера коробки!)
    • height должна быть объявлена (см. Переменная высота)
    • Рекомендуемое overflow: auto настроек overflow: auto предотвращение overflow: auto содержимого (см. Переполнение)

    Простейшим способом были бы следующие 3 строки CSS:

    1) положение: относительное;

    2) верх: 50%;

    3) преобразование: translateY (-50%);

    Ниже приведен пример:

    На самом деле вам нужно два div для вертикального центрирования. Div, содержащий контент, должен иметь ширину и высоту.

    Теперь решение flexbox — очень простой способ для современных браузеров, поэтому я рекомендую это для вас:

    Это самый простой метод, который я нашел, и я использую его все время (демонстрация jsFiddle здесь)

    Спасибо Крису Койеру из CSS Tricks за эту статью.

    Поддержка начинается с IE8.

    После многих исследований я наконец нашел окончательное решение. Он работает даже для плавающих элементов. Просмотр источника

    Чтобы расположить центр на странице, проверьте ссылку на скрипку.

    Другой вариант — использовать flex box, проверить ссылку на скрипку.

    Другой вариант — использовать преобразование CSS 3:

    Flexbox решение

    Примечания
    1. Родительскому элементу присваивается имя класса.
    2. Добавьте префиксы flex vendor, если это требуется вашим поддерживаемыми браузерами.

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

    Для браузеров, совместимых со стандартами, таких как Mozilla, Opera, Safari и т.д., Вам нужно установить внешний div для отображения в виде таблицы, а внутренний div будет отображаться как таблица-ячейка, который затем может быть центрирован по вертикали. Для Internet Explorer вам нужно поместить внутренний div абсолютно внутри внешнего div, а затем указать верхнюю часть как 50%. Следующие страницы хорошо объясняют эту технику и предоставляют некоторые примеры кода:

    Существует также метод вертикального центрирования с использованием JavaScript. Вертикальное выравнивание содержимого с помощью JavaScript и CSS демонстрирует его.

    Если кто-то заботится только об Internet Explorer 10 (и позже), используйте flexbox :

    Самое простое решение ниже:

    Современный способ flexbox элемент по вертикали — использовать flexbox .

    Вам нужен родитель, чтобы определить высоту и ребенка в центре.

    В приведенном ниже примере центр div будет находиться в центре вашего браузера. Что важно (в моем примере) — установить height: 100% на body и html а затем min-height: 100% на ваш контейнер.

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

    Если вы не заботитесь об Internet Explorer 6 и 7, вы можете использовать технику, которая включает два контейнера.

    Внешний контейнер:

    • должен иметь display: table;

    Внутренний контейнер:

    • должен иметь display: table-cell;
    • должен иметь vertical-align: middle;

    Поле содержимого:

    • должен иметь display: inline-block;

    Вы можете добавить любой контент, который вы хотите в поле содержимого, не заботясь о его ширине и высоте!

    Демоверсия:

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

    Если вы хотите центрировать как по горизонтали, так и по вертикали, вам также потребуется следующее.

    Внутренний контейнер:

    • должен иметь text-align: center;

    Поле содержимого:

    • следует перенастроить горизонтальное выравнивание text-align: left; например, text-align: left; или text-align: right; , если вы хотите, чтобы текст был центрирован

    Демоверсия:

    Это всегда, куда я иду, когда я должен вернуться к этой проблеме.

    Для тех, кто не хочет совершать прыжок:

    1. Укажите родительский контейнер как position:relative или position:absolute .
    2. Укажите фиксированную высоту на дочернем контейнере.
    3. Установить position:absolute и top:50% на дочернем контейнере для перемещения сверху вниз до середины родителя.
    4. Установите margin-top: -yy, где yy — половина высоты дочернего контейнера для смещения элемента вверх.

    Пример этого в коде:

    Использование свойства flex в CSS.

    или используя display: flex; и margin: auto;

    показать текстовый центр

    Используя процент (%) высоты и ширины.

    Ответ от Billbad работает только с фиксированной шириной .inner div. Это решение работает для динамической ширины, добавляя атрибут text-align: center в .outer div.

    Я знаю, что ответы уже даны, но я думаю, что ссылка может быть полезна для центрального выравнивания во всех случаях: howtocenterincss.com


    Три строки кода с использованием transform работают практически в современных браузерах и Internet Explorer:

    Я добавляю этот ответ, так как обнаружил некоторую неполноту в предыдущей версии этого ответа (и Qaru не позволит мне просто комментировать).

    ‘position’ relative испортил стиль, если текущий div находится в теле и не имеет контейнера div. Однако «фиксированный», похоже, работает, но он, очевидно, исправляет содержимое в центре окна просмотра

    Также я использовал этот стиль для центрирования некоторых оверлейных div и обнаружил, что в Mozilla все элементы внутри этого преобразованного div потеряли свои нижние границы. Возможно, проблема рендеринга. Но добавление только минимального дополнения, чтобы некоторые из них отображали его правильно. Chrome и Internet Explorer (неожиданно) предоставили ящики без необходимости заполнения

    Центрируем элемент по вертикали, используя CSS

    У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали? И это вызывает определенные проблемы. Однако существует несколько методов для центрирования элементов по вертикали и каждый из этих методов достаточно прост. В этой статьи описаны некоторые из этих методов.

    Чтобы увидеть каждый метод в действии, кликните по кнопке демо или по изображению.

    Давайте обсудим некоторые моменты, которые препятствуют вертикальному центрированию.

    Vertical-Align

    Горизонтальное центрирование элемента достаточно легко реализовать (с помощью CSS). Встроенный элемент (inline) можно центрировать по горизонтали, назначив родительскому контейнеру свойство text-align со значением center . Когда элемент блочный, для центрирования ему достаточно задать ширину ( width ) и установить значения правого ( margin-right ) и левого ( margin-left ) поля на auto .

    Относительно к тексту: многие для центрирования начинают использовать свойство vertical-align . Это логично и мой первый выбор был бы таким же. Чтобы центрировать элемент в таблице, можно использовать атрибут valign .

    Однако атрибут valign работает только применительно к ячейке (например,

    контент

    ). Свойство CSS vertical-align можно применить к ячейке и к некоторым встроенным элементам.

    • Текст центрируется относительно line-height (межстрочный интервал).
    • Применительно к таблице, если не вдаваться в детали, центрирование происходит относительно высоты ряда.

    К сожалению, свойство vertical-align нельзя применять к блочным элементам, например, таким как параграф ( p ) внутри тега div .

    Однако существуют другие методы центрирования элементов по вертикали, и вы по-прежнему можете использовать свойство vertical-align там, где это необходимо. Какой метод использовать зависит от того, что вы собираетесь центрировать.

    Межстрочный интервал или Line-height

    Данный метод стоит использовать только тогда, когда вам нужно центрировать строчку текста. Для этого необходимо у элемента, который содержит текст, установить line-height (межстрочный интервал) больше чем размер шрифта.

    По умолчанию образуется равное пространство над и под текстом, таким образом, текст центрируется по вертикали.

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

    Данный метод работает во всех браузерах, однако не забывайте, что его стоит использовать для строчки текста. Если ваш текст занимает более одной строки, примените другой метод. Значение свойства line-height может быть любым, но не меньше чем высота шрифта. На практике данный метод отлично подходит для центровки горизонтального меню.

    CSS Метод с использованием свойств таблиц

    Как я уже писал, содержимое ячейки можно центрировать с помощью свойства CSS vertical-align . Родительский элемент необходимо представить как таблицу, дочерний элемент обозначим как ячейку и применим к нему свойство vertical-align со значением middle . Таким образом, любой контент в элементе-потомке будет центрирован по вертикали. Css код приведен ниже.

    К сожалению, данный метод не работает в старых версиях браузера IE. Если вам требуется поддержка браузера IE6 и ниже, добавьте объявление display: inline-block дочернему элементу.

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

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

    Ниже приведен код, где дочерний элемент центрирован с помощью данного метода.

    Для начала необходимо позиционировать родительский и дочерний элемент. Затем мы назначаем смещение дочернего элемента на 50% относительно верха (top) и левой стороны (left) элемента родителя, тем самым мы центрируем дочерний элемент относительно родительского. Однако наши манипуляции поставят верхний правый угол дочернего элемента по центру элемента родителя, что нас, конечно, не устраивает.

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

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

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

    Абсолютное позиционирование дочернего элемента

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

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

    Идея данного метода в том, что можно позиционировать дочерний элемент, используя значения свойств top , left , right , bottom равные 0. Так как наш элемент-потомок меньше родительского элемента, он не сможет «прилипнуть» к элементу родителю.

    Значения полей для всех четырех сторон дочернего элемента равны нулю, благодаря этому элемент центрируется по вертикали относительно родителя. К сожаления данный метод имеет те же недостатки, что и предыдущий метод: необходимо фиксировать высоту и ширину потомка, отсутствие поддержки старых браузеров IE.

    Нижний и верхний отступы равны

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

    Я использую относительные размеры. Если размеры блоков зафиксированы, то понадобится произвести некоторые математические расчеты.

    Например, если элемент-родитель имеет высоту 400px, а дочерний 100px, то следует установить верхний и нижний отступ по 150px.

    150 + 150 + 100 = 400

    Плавающий div

    В этом методе задействован пустой плавающий ( float ) блок, который контролирует вертикальное положение дочернего элемента. Плавающий блок div необходимо поставить перед дочерним элементом, смотрите код HTML ниже.

    Сначала мы сдвигаем плавающий блок влево (или вправо) и назначаем ему высоту 50% от родительского элемента. Таким образом, плавающий блок заполнит верхнюю половину родительского элемента.

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

    Сейчас верхний край дочернего элемента лежит непосредственно под нижним краем плавающего элемента. Нам требуется приподнять дочерний элемент на половину высоты плавающего элемента. Для этого достаточно установить для плавающего блока отрицательное нижнее поле равное 50%.

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

    Как вертикально центрировать div для всех браузеров?

    Я хочу div вертикально с помощью CSS. Мне не нужны таблицы или JavaScript, но только чистый CSS. Я нашел некоторые решения, но им не хватает поддержки Internet Explorer 6.

    Как я могу div вертикали во всех основных браузерах, включая Internet Explorer 6?

    Ниже приведено лучшее универсальное решение, которое я мог бы построить для центрирования по вертикали и горизонтали в центре содержимого с фиксированной шириной и гибкой высотой. Он был протестирован и работает для последних версий Firefox, Opera, Chrome и Safari.

    Я встроил некоторый динамический контент для проверки гибкости и хотел бы знать, если кто-нибудь видит какие-либо проблемы с ним. Он должен хорошо работать и для центрированных оверлеев — лайтбокс, всплывающее окно и т.д.

    Еще один, который я не вижу в списке:

    • Кросс-браузер (включая Internet Explorer 8 — Internet Explorer 10 без хаков!)
    • Отзывчивая с процентами и min-/max-
    • Центрируется независимо от заполнения (без размера коробки!)
    • height должна быть объявлена (см. Переменная высота)
    • Рекомендуемое overflow: auto настроек overflow: auto предотвращение overflow: auto содержимого (см. Переполнение)

    Простейшим способом были бы следующие 3 строки CSS:

    1) положение: относительное;

    2) верх: 50%;

    3) преобразование: translateY (-50%);

    Ниже приведен пример:

    На самом деле вам нужно два div для вертикального центрирования. Div, содержащий контент, должен иметь ширину и высоту.

    Теперь решение flexbox — очень простой способ для современных браузеров, поэтому я рекомендую это для вас:

    Это самый простой метод, который я нашел, и я использую его все время (демонстрация jsFiddle здесь)

    Спасибо Крису Койеру из CSS Tricks за эту статью.

    Поддержка начинается с IE8.

    После многих исследований я наконец нашел окончательное решение. Он работает даже для плавающих элементов. Просмотр источника

    Чтобы расположить центр на странице, проверьте ссылку на скрипку.

    Другой вариант — использовать flex box, проверить ссылку на скрипку.

    Другой вариант — использовать преобразование CSS 3:

    Flexbox решение

    Примечания
    1. Родительскому элементу присваивается имя класса.
    2. Добавьте префиксы flex vendor, если это требуется вашим поддерживаемыми браузерами.

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

    Для браузеров, совместимых со стандартами, таких как Mozilla, Opera, Safari и т.д., Вам нужно установить внешний div для отображения в виде таблицы, а внутренний div будет отображаться как таблица-ячейка, который затем может быть центрирован по вертикали. Для Internet Explorer вам нужно поместить внутренний div абсолютно внутри внешнего div, а затем указать верхнюю часть как 50%. Следующие страницы хорошо объясняют эту технику и предоставляют некоторые примеры кода:

    Существует также метод вертикального центрирования с использованием JavaScript. Вертикальное выравнивание содержимого с помощью JavaScript и CSS демонстрирует его.

    Если кто-то заботится только об Internet Explorer 10 (и позже), используйте flexbox :

    Самое простое решение ниже:

    Современный способ flexbox элемент по вертикали — использовать flexbox .

    Вам нужен родитель, чтобы определить высоту и ребенка в центре.

    В приведенном ниже примере центр div будет находиться в центре вашего браузера. Что важно (в моем примере) — установить height: 100% на body и html а затем min-height: 100% на ваш контейнер.

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

    Если вы не заботитесь об Internet Explorer 6 и 7, вы можете использовать технику, которая включает два контейнера.

    Внешний контейнер:

    • должен иметь display: table;

    Внутренний контейнер:

    • должен иметь display: table-cell;
    • должен иметь vertical-align: middle;

    Поле содержимого:

    • должен иметь display: inline-block;

    Вы можете добавить любой контент, который вы хотите в поле содержимого, не заботясь о его ширине и высоте!

    Демоверсия:

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

    Если вы хотите центрировать как по горизонтали, так и по вертикали, вам также потребуется следующее.

    Внутренний контейнер:

    • должен иметь text-align: center;

    Поле содержимого:

    • следует перенастроить горизонтальное выравнивание text-align: left; например, text-align: left; или text-align: right; , если вы хотите, чтобы текст был центрирован

    Демоверсия:

    Это всегда, куда я иду, когда я должен вернуться к этой проблеме.

    Для тех, кто не хочет совершать прыжок:

    1. Укажите родительский контейнер как position:relative или position:absolute .
    2. Укажите фиксированную высоту на дочернем контейнере.
    3. Установить position:absolute и top:50% на дочернем контейнере для перемещения сверху вниз до середины родителя.
    4. Установите margin-top: -yy, где yy — половина высоты дочернего контейнера для смещения элемента вверх.

    Пример этого в коде:

    Использование свойства flex в CSS.

    или используя display: flex; и margin: auto;

    показать текстовый центр

    Используя процент (%) высоты и ширины.

    Ответ от Billbad работает только с фиксированной шириной .inner div. Это решение работает для динамической ширины, добавляя атрибут text-align: center в .outer div.

    Я знаю, что ответы уже даны, но я думаю, что ссылка может быть полезна для центрального выравнивания во всех случаях: howtocenterincss.com

    Три строки кода с использованием transform работают практически в современных браузерах и Internet Explorer:

    Я добавляю этот ответ, так как обнаружил некоторую неполноту в предыдущей версии этого ответа (и Qaru не позволит мне просто комментировать).

    ‘position’ relative испортил стиль, если текущий div находится в теле и не имеет контейнера div. Однако «фиксированный», похоже, работает, но он, очевидно, исправляет содержимое в центре окна просмотра

    Также я использовал этот стиль для центрирования некоторых оверлейных div и обнаружил, что в Mozilla все элементы внутри этого преобразованного div потеряли свои нижние границы. Возможно, проблема рендеринга. Но добавление только минимального дополнения, чтобы некоторые из них отображали его правильно. Chrome и Internet Explorer (неожиданно) предоставили ящики без необходимости заполнения

    Как сделать вертикальное выравнивание css. Способы вертикального выравнивания по центру в CSS

    Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

    Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

    1. Представить блочный элемент как ячейку таблицы (display: table-cell ).
    2. IE6-7: метод expression.
    3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
    4. Позиционирование при помощи внешнего блока (position:absolute ).

    Ну а подведя итоги, рассмотрим еще один метод:

    5. Выравнивание с помощью свойства vertical-align.

    display: table-cell

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

    Вертикальное выравнивание. Способ display: table-cell

    Цукерберг рекомендует:  Глянцевое горизонтальное меню
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих