Как выровнять элементы по вертикали css

25.11.2023

Как выровнять элементы по вертикали css

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:

stretch : значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера
flex-start : элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера
flex-end : элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера
center : элементы выравниваются по центру flex-контейнера
baseline : элементы выравниваются в соответствии со своей базовой линией

Выравнивание при расположении в строку:

    Flexbox в CSS3 .flex-container < display: flex; border:1px #ccc solid; height:5em; >.flex-start < align-items: flex-start; >.flex-end < align-items: flex-end; >.center < align-items: center; >.baseline < align-items: baseline; >.flex-item < text-align:center; font-size: 1em; padding: 1.2em; color: white; >.largest-item < padding-top:2em; >.color1 .color2 .color3 .color4 Flex-start
 Flex Item 1
 Flex Item 2
 Flex Item 3
 Flex Item 4
 
 Flex-end
 Flex Item 1
 Flex Item 2
 Flex Item 3
 Flex Item 4
 
 Center
 Flex Item 1
 Flex Item 2
 Flex Item 3
 Flex Item 4
 
 Baseline
 Flex Item 1
 Flex Item 2
 Flex Item 3
 Flex Item 4

Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:

.flex-container

align-items и column в Flexbox и CSS3

Свойство align-self

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те же значения плюс значение «auto»:

auto : значение по умолчанию, при котором элемент получает значение от свойства align-items , которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch .
stretch
flex-start
flex-end
center
baseline

    Flexbox в CSS3 .flex-container < display: flex; border:1px #ccc solid; justify-content: space-between; align-items: stretch; height:12em; >.flex-item < text-align:center; font-size: 1em; padding: 1.2em; color: white; >.item1 .item2 .item3 .item4 Align-self
 Flex Item 1
 Flex Item 2
 Flex Item 3
 Flex Item 4

Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch; . Однако каждый из элементов переопределяет это поведение:

Flexbox justify-content: полное руководство по центрированию

От автора: Flexbox — это популярный модуль макета CSS, который помогает позиционировать элементы HTML на экране. Есть много сценариев использования, когда он может оказаться настоящей находкой; горизонтальное и вертикальное центрирование из их числа. Центрирование Flexbox justify-content решает стандартные проблемы выравнивания, с которыми вы можете столкнуться при работе с традиционной блочной моделью CSS. Это позволяет центрировать элементы внутри их контейнера как по горизонтали, так и по вертикали с помощью всего лишь нескольких строк кода CSS.

Макеты Flexbox на основе рядов и столбцов

Flexbox — это модуль одномерного макета, это означает, что ваши макеты основаны на строках или столбцах. Вы можете установить направление макета, используя свойство flex-direction, которое необходимо использовать во flex-контейнере. Оно может принимать четыре значения: row, row-reverse, column и column-reverse. Вот как на экране выглядят четыре разных направления flex:

Flex-макет на основе рядов (по умолчанию):

display : flex ;
flex-direction : row ;

Flexbox justify-content: полное руководство по центрированию

Реверсивный макет на основе рядов:

display : flex ;
flex-direction : row-reverse ;

Flexbox justify-content: полное руководство по центрированию

Flex-макет на основе столбцов:

display : flex ;
flex-direction : column ;

Flexbox justify-content: полное руководство по центрированию

Реверсивный макет на основе столбцов:

display : flex ;
flex-direction : column-reverse ;

Flexbox justify-content: полное руководство по центрированию

На рисунке выше, вы можете увидеть макеты Flexbox с одной строкой, для которых мы не изменяли значение свойства flex-wrap по умолчанию — Nowrap . Поэтому, если вы хотите отображать элементы в нескольких строках или столбцах, добавьте для flex-контейнера также правило flex-wrap: wrap;.

Как работает центрирование Flexbox?

Фактически, flexbox не использует понятия «горизонтальное» и «вертикальное» центрирование. Вместо этого он работает с основной и поперечной осями, которые на экране выглядят как горизонтальное и вертикальное центрирование. Направление основной и поперечной осей зависит от значения вышеупомянутого свойства flex-direction.

В макетах flexbox на основе рядов (row и row-reverse) основная ось проходит в горизонтальном направлении, а поперечная — в вертикальном. С другой стороны, в макетах flexbox на основе столбцов (column и column-reverse) основная ось проходит вертикально, а поперечная ось — горизонтально. Если вы хотите узнать больше о том, как работают оси flexbox, ознакомьтесь с документацией по Flexbox на MDN.

Когда мы говорим о центрировании flexbox, мы имеем в виду два вида центрирования:

Центрирование вдоль основной оси (также называемой осью блока).

Центрирование вдоль поперечной оси (также называемой линейной осью).

Если вам нужен идеально отцентрированный flex-элемент, вы должны отцентрировать его вдоль обеих осей.

Центрирование вдоль основной оси

Вам необходимо использовать свойство justify-content для центрирования flex-элементов вдоль главной оси. Значением по умолчанию — flex-start, которое выравнивает все элементы внутри контейнера flex по началу главной оси. Если вы хотите центрировать элементы, вам нужно использовать его со значением center.

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

Как вертикальное выравнивание элементов в div?

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

Одно из изображений должно быть absolute расположено внутри div.

Какой CSS необходим для работы всех распространенных браузеров?

 id="header">  src=".." > testing.   src=". ">

Я составил список всех способов выравнивания по вертикали .. Я собираюсь оставить его здесь: jsfiddle.net/techsin/FAwku/1

Вот два простых метода для центрирования элемента внутри div, по вертикали, по горизонтали или в обоих (чистый CSS): stackoverflow.com/a/31977476/3597276

margin-top: auto и margin-bottom: auto (Работает для многих случаев).

Вау, эта проблема популярна. Это основано на недоразумении в vertical-align собственности. Эта превосходная статья объясняет это:

«Как центрировать в CSS» — это отличный веб-инструмент, который помогает найти необходимые атрибуты центрирования CSS для различных ситуаций.

В двух словах _{(и для предотвращения гниения ссылок)} :

Встроенные элементы (и только встроенные элементы) могут быть выровнены по вертикали в их контексте с помощью vertical-align: middle . Однако «контекст» — это не вся высота родительского контейнера, а высота текстовой строки, в которой они находятся. Пример jsfiddle
Для блочных элементов вертикальное выравнивание сложнее и сильно зависит от конкретной ситуации:
- Если внутренний элемент может иметь фиксированную высоту , вы можете сделать свою позицию absolute и указать его height , margin-top и top положение. пример jsfiddle
- Если центрированный элемент состоит из одной строкииего родительская высота фиксирована, вы можете просто установить контейнер line-height для заполнения его высоты. Этот метод довольно универсален по моему опыту. пример jsfiddle
- . есть еще такие особые случаи.
Проблема с «действительными» решениями (поэтому не с vertical-align: middle ) заключается в том, что вам нужно указать фиксированную высоту. Не очень возможно для адаптивного веб-дизайна .

У меня была такая структура:

My Text Сработало для меня, установите свойство lineHeight, используя то же значение, что и в свойстве div height: ‘## px’ (## потому что это значение динамично в моем случае) спасибо

Это также работает с inline-block и table-cell элементами. Если у вас возникли проблемы с этим, попробуйте настроить line-height элемент контейнера (т.е. контекст), поскольку он используется в vertical-align вычислениях линейного блока.

css-tricks.com/centering-css-complete-guide

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

Теперь, когда поддержка flexbox увеличивается, этот CSS, примененный к содержащему элементу, будет вертикально центрировать содержащийся элемент:
```
.container  display: flex; align-items: center; >
```
Используйте префиксную версию, если вам также нужно ориентироваться на Explorer 10 и старые (<4.4) браузеры Android:
```
.container  display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; >
```
Хорошее решение, спасибо. Можете ли вы предложить, как заставить flexbox отображать горизонтальную полосу прокрутки, если внутренний элемент больше контейнера? (Я пытаюсь сделать внутренний элемент масштабируемым / прокручиваемым внутри контейнера, как canvas в powerpoint)? Это вообще возможно?

@YazidErman это решение зависит от flexbox, так что нет, только поддержка IE 10 и выше или любой другой современный браузер caniuse.com/#search=flexbox Flexbox отлично подходит для тех случаев, когда он поддерживается, но не везде. Отображаемая таблица и ячейка таблицы, вероятно, являются действительно лучшим решением, контейнер просто должен быть таблицей, центрируемый элемент оборачивается элементом с ячейкой отображаемой таблицы, а затем может просто центрироваться, как указывают некоторые другие ответы.

Почему мне было так трудно найти>.
Полезные CSS трюки руководство по flexbox, а затем посмотрите на align-items раздел
В 2020 году мы можем использовать flexbox caniuse.com/#feat=flexbox

Я использовал этот очень простой код:
```
 class="ext-box">  class="int-box"> Some txt  bla bla bla   
```
```
div.ext-box  display: table; width:100%;> div.int-box  display: table-cell; vertical-align: middle; >
```
Очевидно, что, используете ли вы .class или #id , результат не изменится.

Вот полный пример всех девяти возможностей выравнивания (верх-середина-низ и лево-центр-право): jsfiddle.net/webMac/0swk9hk5

В 2020 году мы можем использовать flexbox caniuse.com/#feat=flexbox
отлично работает для меня

Это сработало для меня:
```
.vcontainer  min-height: 10em; display: table-cell; vertical-align: middle; >
```
Значит, это больше не «блочный» элемент?

Тогда, если вы хотите выровнять по горизонтали margin : 0 auto , это не сработает из-за display: table-cell
```
 .outer  display: flex; align-items: center; justify-content: center; >
```
Я думаю, что это решение является самым быстрым и простым для понимания. Возможно, это потому, что я не был достаточно терпелив, чтобы ухватиться за выбранный ответ. Flexbox все вещи!

Дополнение justify-content: center исправило мое отсутствие горизонтального центрирования

Техника от моего друга:
```
 style="height:100px; border:1px solid;">  style="border:1px dotted;">I'm vertically centered.  
```
```
div:before content:" "; display:inline-block; height:100%; vertical-align:middle;> div p display:inline-block;>
```
этот метод более подробно описан здесь: css-tricks.com/centering-in-the-unknown

Чтобы расположить элементы блока по центру (работает в IE9 и выше), требуется оболочка div :
```
.vcontainer  position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); >
```
Этот метод может сделать элементы размытыми из-за того, что элемент размещен на «полупикселе». Решение для этого состоит в том, чтобы установить перспективу элемента. transform: перспектива (1px) translateY (-50%);

Все они должны быть вертикально выровнены внутри div

Выровняли как ? Вершины изображений выровнены по верху текста?

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

Абсолютно позиционируется относительно DIV? Возможно, вы могли бы набросать то, что вы ищете .

fd описал шаги для абсолютного позиционирования, а также для настройки отображения H1 элемента таким образом, чтобы изображения отображались внутри него. К этому я добавлю, что вы можете выровнять изображения, используя vertical-align стиль:
```
#header h1 #header img 
```
. это объединит заголовок и изображения с выровненными верхними краями. Существуют другие варианты выравнивания; обратитесь к документации . Также может оказаться полезным сбросить DIV и переместить изображения внутри H1 элемента — это обеспечивает семантическую ценность для контейнера и устраняет необходимость настраивать отображение H1 :
```
 id=header">  src=".." > testing.  src=". "> 
```
Используйте эту формулу, и она будет работать всегда без трещин:
```
#outer height: 400px; overflow: hidden; position: relative;> #outer[id] display: table; position: static;> #middle position: absolute; top: 50%;> /* For explorer only*/ #middle[id] display: table-cell; vertical-align: middle; width: 100%;> #inner position: relative; top: -50%> /* For explorer only */ /* Optional: #inner[id] */
```
```
 id="outer">  id="middle">  id="inner"> any text any height any content, for example generated from DB everything is vertically centered   
```
Выполнить фрагмент кода Скрыть результаты

Я никогда не видел в css такого рода селектор «#outer [id]». Что это должно делать? Что если у меня будет класс вместо идентификатора?

Почти все методы должны указывать высоту, но часто у нас нет никаких высот.
Итак, вот 3-х строчный трюк CSS3, который не требует знать высоту.
```
.element  position: relative; top: 50%; transform: translateY(-50%); >
```
Это поддерживается даже в IE9.

с его префиксами поставщика:
```
.element  position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); >
```
но это, кажется, работает только тогда, когда высота родительского элемента фиксирована. свойство top с процентным значением работает только в контейнере с фиксированной высотой, верно?

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

Двумя способами вы можете выровнять элементы по вертикали и по горизонтали
1. Bootstrap 4
2. CSS3
1. Bootstrap 4.3.X

для вертикального выравнивания: d-flex align-items-center

для горизонтального выравнивания: d-flex justify-content-center
```
.container  height: 180px; width:100%; >
```
```
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>  class="d-flex align-items-center justify-content-center bg-info container">  class="bg-light p-2">I am in Center  
```
Выполнить фрагмент кода Скрыть результаты

2. CSS3
```
.container  display: flex; align-items: center; // verticall center justify-content: center; // horizontally center background-color: #17a2b8; height: 180px; width:100%; > .child  background-color: #f8f9fa; padding: 0.5rem; >
```
```
 class="container">  class="child">I am in Center  
```
Выполнить фрагмент кода Скрыть результаты

Оба способа в основном одинаковы, так как Bootstrap использует одинаковые атрибуты flex в своих классах.

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

Мой трюк заключается в том, чтобы поместить в div таблицу с 1 строкой и 1 столбцом, установить 100% ширины и высоты, а также свойство vertical-align: middle.
```
  style="width:100%; height:100%;">  style="vertical-align:middle;"> BUTTON TEXT    
```
Это кажется лучшим способом избежать царапин на голове. Я все еще не понимаю, почему у CSS нет стандарта вертикального выравнивания.

# 3 способа сделать дочерний центр центром в родительском элементе div
- Абсолютный метод позиционирования
- Метод Flexbox
- Преобразовать / Перевести Методдемонстрация
```
/* 1st way */ .parent1  background: darkcyan; width: 200px; height: 200px; position: relative; > .child1  background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; margin: -15px; > /* 2nd way */ .parent2  display: flex; justify-content: center; align-items: center; background: darkcyan; height: 200px; width: 200px; > .child2  background: white; height: 30px; width: 30px; > /* 3rd way */ .parent3  position: relative; height: 200px; width: 200px; background: darkcyan; > .child3  background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >
```
```
 class="parent1">  class="child1">
```

/> class="parent2"> class="child2">

/> class="parent3"> class="child3">

Выполнить фрагмент кода Скрыть результаты

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

В качестве примера я вложил несколько объектов в JSFiddle, но основная идея такова:

HTML

 class="circle">  class="content"> Some text

CSS

 .circle  /* act as a table so we can center vertically its child */ display: table; /* set dimensions */ height: 200px; width: 200px; /* horizontal center text */ text-align: center; /* create a red circle */ border-radius: 100%; background: red; > .content  /* act as a table cell */ display: table-cell; /* and now we can vertically center! */ vertical-align: middle; /* some basic markup */ font-size: 30px; font-weight: bold; color: white; >

Пример нескольких объектов:

HTML

 class="container">  class="content">  class="centerhoriz">  class="circle">  class="content"> Some text   class="square">  class="content">  id="smallcircle">

CSS

.container  display: table; height: 500px; width: 300px; text-align: center; background: lightblue; > .centerhoriz  display: inline-block; > .circle  display: table; height: 200px; width: 200px; text-align: center; background: red; border-radius: 100%; margin: 10px; > .square  display: table; height: 200px; width: 200px; text-align: center; background: blue; margin: 10px; > .content  display: table-cell; vertical-align: middle; font-size: 30px; font-weight: bold; color: white; > #smallcircle  display: inline-block; height: 50px; width: 50px; background: green; border-radius: 100%; >

Результат

Результат

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

Чтобы это не происходило, вы можете установить h1 для поведения встроенного потока:

#header > h1

Что касается абсолютного позиционирования img внутри div , вам нужно установить содержащий div для «известного размера», прежде чем это будет работать должным образом. По моему опыту, вам также нужно изменить атрибут позиции с значения по умолчанию — положение: относительный работает для меня:

#header #img-for-abs-positioning

Если вы можете заставить это работать, вы можете попытаться постепенно удалять атрибуты height, width, position из div.header, чтобы получить минимальные обязательные атрибуты для получения желаемого эффекта.

ОБНОВИТЬ:

Вот полный пример, который работает на Firefox 3:

   Example of vertical positioning inside a div   type="text/css"> #header > h1  display: inline; > #header  border: solid 1px red; position: relative; > #img-for-abs-positioning  position: absolute; bottom: -1em; right: 2em; >    id="header">  src="#" alt="Image 1" width="40" height="40" /> Header   src="#" alt="Image 2" width="40" height="40" id="img-for-abs-positioning" />

Я должен отметить, что наличие правильного DOCTYPE иногда может сильно повлиять на то, как CSS будет отображаться, особенно в Internet Explorer. Я бы порекомендовал вам выбрать DOCTYPE, который, как известно, соответствует строгим стандартам, чтобы вы могли ожидать более согласованного поведения между браузерами.

Я бы не «ожидал» какой-либо согласованности между браузерами . единственный способ убедиться в этом — это проверить: /

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

 class="box">  href="#">Some Text

.box  display: block; background: #60D3E8; position: relative; width: 300px; height: 200px; text-align: center; > .box span  font: bold 20px/20px 'source code pro', sans-serif; position: absolute; left: 0; right: 0; top: calc(50% - 10px); > a  color: white; text-decoration: none; >

Это решение хорошо работает с отзывчивым div height и width также.

Примечание. Функция calc не проверяется на совместимость со старыми браузерами.

На сегодняшний день я нашел новый обходной путь для вертикального выравнивания нескольких текстовых строк в div с использованием CSS3 (и я также использую систему сетки bootstrap v3 для украшения пользовательского интерфейса), как показано ниже:

.immediate-parent-of-text-containing-div height: 50px; /* or any fixed height that suits you.*/ > .text-containing-div  display: inline-grid; align-items: center; text-align: center; height: 100%; >

Насколько я понимаю, непосредственный родительский элемент текста, содержащего элемент, должен иметь некоторую высоту. Я надеюсь, что это вам тоже поможет. Спасибо!

Очень чистое решение. Этот работал для меня хорошо.

Мой новый любимый способ сделать это с помощью сетки CSS:

/* technique */ .wrapper  display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center; > /* visual emphasis */ .wrapper  border: 1px solid red; height: 180px; width: 400px; > img  width: 100px; height: 80px; background: #fafafa; > img:nth-child(2)  height: 120px; >

 class="wrapper">  src="https://source.unsplash.com/random/100x80/?bear">  src="https://source.unsplash.com/random/100x120/?lion">  src="https://source.unsplash.com/random/100x80/?tiger">

Выполнить фрагмент кода Скрыть результаты

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

Стол из одной ячейки внутри div обрабатывает выравнивание по вертикали и обратно совместим с каменным веком!

Я использую следующее решение (без позиционирования и без высоты строки), так как в течение года оно работает с IE 7 и 8.

 .outer  font-size: 0; width: 400px; height: 400px; background: orange; text-align: center; display: inline-block; > .outer .emptyDiv  height: 100%; background: orange; visibility: collapse; > .outer .inner  padding: 10px; background: red; font: bold 12px Arial; > .verticalCenter  display: inline-block; *display: inline; zoom: 1; vertical-align: middle; >   class="outer">  class="emptyDiv verticalCenter">

class="inner verticalCenter"> Line 1 Line 2

Это мое личное решение для элемента i внутри div

HTML

 class="circle">  class="fa fa-plus icon">

CSS

.circle  border-radius: 50%; color: blue; background-color: red; height:100px; width:100px; text-align: center; line-height: 100px; > .icon  font-size: 50px; vertical-align: middle; >

Для меня это сработало так:

 style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">  href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login

Элемент «a» преобразован в кнопку с использованием классов Bootstrap, и теперь он центрируется по вертикали внутри внешнего «div».

используя display flex, сначала вам нужно обернуть контейнер элемента, который вы хотите выровнять.

 class="outdiv">  class="indiv"> test1  test2

затем примените следующий CSS к оболочке div или outdiv в моем примере

.outdiv  display: flex; justify-content:center; align-items:center; >

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

  style="width: 100%; height: 100%">  style="width: 100%; height: 100%; vertical-align: middle;"> What ever you want vertically-aligned

Стол из одной ячейки внутри div обрабатывает выравнивание по вертикали и обратно совместим с каменным веком!

   type="text/css"> #style_center  position:relative; top:50%; left:50%; > #style_center_absolute  position:absolute; top:50px; left:50px; > #style_center  position:relative; top:50%; left:50%; height:50px; margin-top:-25px; >-->    style="height:200px; width:200px; background:#00FF00">  id="style_center">+

Вот еще один (отзывчивый) подход:

html, body  height: 100%; > body  margin: 0; > .table  display: table; width: auto; table-layout:auto; height: 100%; > .table:nth-child(even)  background: #a9edc3; > .table:nth-child(odd)  background: #eda9ce; > .tr  display: table-row; > .td  display: table-cell; width: 50%; vertical-align: middle; >

Я парень .NET, который только начал заниматься веб-программированием. Я не использовал CSS (ну, немного). Я использовал немного JavaScript для выполнения вертикального центрирования вместе с функцией jcuery .css.

Я просто публикую все из моего теста. Это, вероятно, не слишком элегантно, но пока работает.

script.  script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">script> script type="application/javascript"> function centerElementVertically(id)  var btnDivHeight = $(id).outerHeight(); var prnt = $(id).parent(); var parentHeight = prnt.outerHeight(); var newTop = ((parentHeight - btnDivHeight) / 2) + 'px'; var newPct = newTop / parentHeight+'%;'; $(id).css(top: newTop>); > function showAlert() alert("alert"); > $(window).load(()=> centerElementVertically('#buttonRight'); centerElementVertically('#buttonLeft'); centerElementVertically('#testerbtn') >); $(window).resize(()=> centerElementVertically('#buttonRight'); centerElementVertically('#buttonLeft'); centerElementVertically('#testerbtn') >) script> #div1  position:relative; height: 33%; background-color: red; overflow: hidden; > #buttonLeft  position: relative; float:left; width:50%; height:20%; background-color: cornsilk; > #buttonRight  position: relative; float:right; width:50%; height:50%; background-color: darkorchid; > #testerbtn  position: absolute; > body  background-color: aqua; > style> div id="div1"> div id="buttonLeft"> button id="testerbtn">testerbutton> div> div id="buttonRight">div> div> body> head> html>

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

 id="header" style="display: table-cell; vertical-align:middle;">

.someClass  display: table-cell; vertical-align:middle; >

Flex выравнивание по вертикали: Aligning Items in a Flex Container — Web technology for developers – Как выровнять текст в колонке flex по вертикали? — Хабр Q&A

CSS3 flexbox — описание всех свойств модуля, примеры верстки

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.

Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Модуль flexbox позволяет решать следующие задачи:

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

Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.

Список текущих проблем модуля и кросс-браузерных решений для них вы можете прочитать в статье Philip Walton Flexbugs.

Что такое flexbox

Поддержка браузерами

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Основные понятия

box-model

Рис. 1. Модель flexbox

Для описания модуля Flexbox используется определенный набор терминов. Значение

flex-flow и режим записи определяют соответствие этих терминов физическим направлениям: верх / право / низ / лево, осям: вертикальная / горизонтальная и размерам: ширина / высота.

Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.

Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).

Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.

Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.

Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.

Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.

box-model

Рис. 2. Режим строки и колонки

2. Flex-контейнер

Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float , clear , vertical-align . Также, на flex-контейнер не оказывают влияние свойства column-* , создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter .

Модель flexbox-разметки связана с определенным значением CSS-свойства display

родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:

.flex-container < /*генерирует flex-контейнер уровня блока*/ display: -webkit-flex; display: flex; >.flex-container < /*генерирует flex-контейнер уровня строки*/ display: -webkit-inline-flex; display: inline-flex; >

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

display-flex

Рис. 3. Выравнивание элементов в модели flexbox

Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.

3. Flex-элементы

Flex-элементы — блоки, представляющие содержимое flex-контейнера в потоке. Flex-контейнер устанавливает новый контекст форматирования для своего содержимого, который обуславливает следующие особенности:

Для flex-элементов блокируется их значение свойства display . Значение display: inline-block; и display: table-cell; вычисляется в display: block; .
Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.

4. Порядок отображения flex-элементов и ориентация

Содержимое flex-контейнера можно разложить в любом направлении и в любом порядке (переупорядочение flex-элементов внутри контейнера влияет только на визуальный рендеринг).

4.1. Направление главной оси: flex-direction

Свойство относится к flex-контейнеру. Управляет направлением главной оси, вдоль которой укладываются flex-элементы, в соответствии с текущим режимом записи. Не наследуется.

flex-direction
Значения:
row	Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) оси строки (inline-axis).
row-reverse	Направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого).
column	Направление сверху вниз. Flex-элементы выкладываются в колонку.
column-reverse	Колонка с элементами в обратном порядке, снизу вверх.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

.flex-container

4.2. Управление многострочностью flex-контейнера: flex-wrap

Свойство определяет, будет ли flex-контейнер однострочным или многострочным, а также задает направление поперечной оси, определяющее направление укладки новых линий flex-контейнера.

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

flex-wrap
Значения:
nowrap	Значение по умолчанию. Flex-элементы не переносятся, а располагаются в одну линию слева направо (в rtl справа налево).
wrap	Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо (в rtl справа налево).
wrap-reverse	Flex-элементы переносятся на новые линии, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 5. Управление многострочностью с помощью свойства flex-wrap для LTR-языков

.flex-container

4.3. Краткая запись направления и многострочности: flex-flow

Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction и flex-wrap . Значение по умолчанию flex-flow: row nowrap; . свойство не наследуется.

flex-flow
Значения:
направление	Указывает направление главной оси. Значение по умолчанию row .
многострочность	Задаёт многострочность поперечной оси. Значение по умолчанию nowrap .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

.flex-container

4.4. Порядок отображения flex-элементов: order

Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам. Свойство не наследуется.

Первоначально все flex-элементы имеют order: 0; . При указании значения от -1 для элемента он перемещается в начало сроки, значение 1 — в конец. Если несколько flex-элементов имеют одинаковое значение order , они будут отображаться в соответствии с исходным порядком.

order
Значения:
число	Свойство задается целым числом, отвечающим за порядок отображения flex-элементов. Значение по умолчанию 0 .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

.flex-container < display: -webkit-flex; display: flex; >.flex-item

order

Рис. 6. Порядок отображения flex-элементов

5. Гибкость flex-элементов

Определяющим аспектом гибкого макета является возможность «сгибать» flex-элементы, изменяя их ширину / высоту (в зависимости от того, какой размер находится на главной оси), чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойства flex . Flex-контейнер распределяет свободное пространство между своими дочерними элементами (пропорционально их коэффициенту flex-grow ) для заполнения контейнера или сжимает их (пропорционально их коэффициенту flex-shrink ), чтобы предотвратить переполнение.

Flex-элемент будет полностью «негибок», если его значения flex-grow и flex-shrink равны нулю, и «гибкий» в противном случае.

5.1. Задание гибких размеров одним свойством: flex

Свойство является сокращённой записью свойств flex-grow , flex-shrink и flex-basis . Значение по умолчанию: flex: 0 1 auto; . Можно указывать как одно, так и все три значения свойств. Свойство не наследуется.

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

flex
Значения:
коэффициент растяжения	Коэффициент увеличения ширины flex-элемента относительно других flex-элементов.
коэффициент сужения	Коэффициент уменьшения ширины flex-элемента относительно других flex-элементов.
базовая ширина	Базовая ширина flex-элемента.
auto	Эквивалентно flex: 1 1 auto; .
none	Эквивалентно flex: 0 0 auto; .
initial	Устанавливает значение свойства в значение по умолчанию. Эквивалентно flex: 0 1 auto; .
inherit	Наследует значение свойства от родительского элемента.

.flex-container < display: -webkit-flex; display: flex; >.flex-item

5.2. Коэффициент роста: flex-grow

Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.

flex-grow
Значения:
число	Положительное целое или дробное число, устанавливающее коэффициент роста flex-элемента. Значение по умолчанию 0 .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

order Рис. 7. Управление свободным пространством в панели навигации с помощью flex-grow

.flex-container < display: -webkit-flex; display: flex; >.flex-item

5.3. Коэффициент сжатия: flex-shrink

Свойство указывает коэффициент сжатия flex-элемента относительно других flex-элементов при распределении отрицательного свободного пространства. Умножается на базовый размер flex-basis . Отрицательное пространство распределяется пропорционально тому, насколько элемент может сжаться, поэтому, например, маленький flex-элемент не уменьшится до нуля, пока не будет заметно уменьшен flex-элемент большего размера. Свойство не наследуется.

flex-shrink
Значения:
число	Положительное целое или дробное число, устанавливающее коэффициент уменьшения flex-элемента. Значение по умолчанию 1 .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

flex-shrink Рис. 8. Сужение flex-элементов в строке

.flex-container < display: -webkit-flex; display: flex; >.flex-item

5.4. Базовый размер: flex-basis

Свойство устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content , базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера flex-контейнера, а если размер не задан, используемым значением для flex-basis являются размеры его содержимого. Не наследуется.

flex-basis
Значения:
auto	Значение по умолчанию. Элемент получает базовый размер, соответствующий размеру его содержимого (если он не задан явно).
content	Определяет базовый размер в зависимости от содержимого flex-элемента.
длина	Базовый размер определяется так же, как для ширины и высоты. Задается в единицах длины.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

.flex-container < display: -webkit-flex; display: flex; >.flex-item

6. Выравнивание

6.1. Выравнивание по главной оси: justify-content

Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin ). Промежутки добавляются после расчета значений margin и flex-grow . Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto; , свойство не будет оказывать влияния. Свойство не наследуется.

justify-content
Значения:
flex-start	Значение по умолчанию. Flex-элементы выкладываются в направлении, идущем от начальной линии flex-контейнера.
flex-end	Flex-элементы выкладываются в направлении, идущем от конечной линии flex-контейнера.
center	Flex-элементы выравниваются по центру flex-контейнера.
space-between	Flex-элементы равномерно распределяются по линии. Первый flex-элемент помещается вровень с краем начальной линии, последний flex-элемент — вровень с краем конечной линии, а остальные flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя соседними элементами было одинаковым. Если оставшееся свободное пространство отрицательно или в строке присутствует только один flex-элемент, это значение идентично параметру flex-start .
space-around	Flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя смежными flex-элементами было одинаковым, а расстояние между первым / последним flex-элементами и краями flex-контейнера составляло половину от расстояния между flex-элементами.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 9. Выравнивание элементов и распределение свободного пространства с помощью свойства justify-content

.flex-container

6.2. Выравнивание по поперечной оси: align-items и align-self

Flex-элементы можно выравнивать по поперечной оси текущей строки flex-контейнера. align-items устанавливает выравнивание для всех элементов flex-контейнера, включая анонимные flex-элементы. align-self позволяет переопределить это выравнивание для отдельных flex-элементов. Если любое из поперечных margin flex-элемента имеет значение auto , align-self не имеет никакого влияния.

6.2.1. Align-items

Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси. Не наследуется.

align-items
Значения:
flex-start	Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси.
flex-end	Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси.
center	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
baseline	Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают.
stretch	Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto , элемент растягивается. Значение по умолчанию.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

align-items Рис. 10. Выравнивание элементов в контейнере по вертикали

.flex-container

6.2.2. Align-self

Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-items . Не наследуется.

align-self
Значения:
auto	Значение по умолчанию. Flex-элемент использует выравнивание, указанное в свойстве align-items flex-контейнера.
flex-start	Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси.
flex-end	Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси.
center	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
baseline	Flex-элемент выравнивается по базовой линии.
stretch	Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto , элемент растягивается. Значение по умолчанию.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

align-self Рис. 11. Выравнивание отдельных flex-элементов

.flex-container < display: -webkit-flex; display: flex; >.flex-item

6.3. Выравнивание строк flex-контейнера: align-content

Свойство выравнивает строки в flex-контейнере при наличии дополнительного пространства на поперечной оси, аналогично выравниванию отдельных элементов на главной оси с помощью свойства justify-content . Свойство не влияет на однострочный flex-контейнер. Не наследуется.

align-content
Значения:
flex-start	Строки укладываются по направлению к началу flex-контейнера. Край первой строки помещается вплотную к краю flex-контейнера, каждая последующая — вплотную к предыдущей строке.
flex-end	Строки укладываются по направлению к концу flex-контейнера. Край последней строки помещается вплотную к краю flex-контейнера, каждая предыдущая — вплотную к последующей строке.
center	Строки укладываются по направлению к центру flex-контейнера. Строки расположены вплотную друг к другу и выровнены по центру flex-контейнера с равным расстоянием между начальным краем содержимого flex-контейнера и первой строкой и между конечным краем содержимого flex-контейнера и последней строкой.
space-between	Строки равномерно распределены в flex-контейнере. Если оставшееся свободное пространство отрицательно или в flex-контейнере имеется только одна flex-линия, это значение идентично flex-start . В противном случае край первой строки помещается вплотную к начальному краю содержимого flex-контейнера, край последней строки — вплотную к конечному краю содержимого flex-контейнера. Остальные строки распределены так, чтобы расстояние между любыми двумя соседними строками было одинаковым.
space-around	Строки равномерно распределены в flex-контейнере с половинным пробелом на обоих концах. Если оставшееся свободное пространство отрицательно, это значение идентично цент center . В противном случае строки распределяются таким образом, чтобы расстояние между любыми двумя соседними строками было одинаковым, а расстояние между первой / последней строками и краями содержимого flex-контейнера составляло половину от расстояния между строками.
stretch	Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. Если оставшееся свободное пространство отрицательно, это значение идентично flex-start . В противном случае свободное пространство будет разделено поровну между всеми строками, увеличивая их поперечный размер.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

align-content Рис. 12. Многострочное выравнивание flex-элементов

.flex-container

По материалам CSS Flexible Box Layout Module Level 1

Вертикальное выравнивание в Flexbox | lets-code

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

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

Для начала накидаем небольшую разметку, возьмём 4 контейнера и разместим там по 3 элемента:

Читать:

Как закрыть вкладку если она не закрывается