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

Центровка с помощью calc

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

.center { background: hsl(300, 100%, 97%); min-height: 600px;position: relative; }
.center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); }

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

top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));

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

.center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }

Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:

.center img { width: 40%; height: auto; position: absolute;
top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%);
top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%);
top: calc(50% - 20%); left: calc(50% - 20%); }

Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.

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

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

Выравнивание по центру строкового или строково-* элемента

Выравнивание элемента с одной строкой

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

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

Выравнивание многострочного элемента

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

Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.

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

Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.

Выравнивание по центру блочного элемента

Выравнивание элемента с известной высотой

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

Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:

Выравнивание элемента с неизвестной высотой

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

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

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

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

HTML-код:

<div class="parent">
  ...
  <div class="child">
    ...
  </div>
</div>  

CSS-код:

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

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

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

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

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  /* ширина и высота 2 блока */
  width: 500px;  
  height: 250px;
  /* Значения определяются в зависимости от его размера */
  /* margin-left = - width / 2 */
  margin-left: -250px;
  /* margin-top = - height / 2 */
  margin-top: -125px;
}

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

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

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

.parent {
  position: relative;
}
.child {
  position: absolute;
  /* ширина и высота 2 блока в % */
  height: 50%;
  width: 50%;
  /* Значения определяются в зависимости от его размера в % */
  left: 25%; /* (100% - width) / 2 */
  top: 25%;  /* (100% - height) / 2 */
}

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

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

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

Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).

Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:

Доступные значения этого правила  определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.

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

 Примеры использования свойства:

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

Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:

Далее рассмотрим вертикальное выравнивание — свойство vertical-align. Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

Рассмотрим каждое значение подробнее:

• baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
• sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
• super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
• top — выравнивание фрагмента текста по верхнему краю родительского элемента;
• text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
• middle — выравнивание центра фрагмента текста по центру родительского элемента;
• bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
• text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:

 Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что  и  запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.

Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.

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

• top — для выравнивания содержимого по верхней границе ячейки;
• bottom — для выравнивания содержимого по нижней границе ячейки;
• middle — для выравнивания по центру ячейки (используется по умолчанию).

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

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

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

• .second{float:left}
• .third{float:right}
• .clearfix{height:0; clear: both;}

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

• .left{float:left}
• .right{float:right}
• .container:after{content:»; display:table; clear:both;}

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

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

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

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

text-align:center;

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

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

Использование отступов

Если добавить отступ к слою слева с помощью свойства margin-left,
то визуально слой сместится на указанное значение вправо. Зная ширину слоя,
его можно сместить так, чтобы слой располагался по центру веб-страницы. Для
чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя
в процентах и полученное значение разделить пополам. Результат и будет значением
свойства margin-left (пример 1).

Пример 1. Использование margin-left

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа
слева и справа (пример 2).

Пример 2. Использование отступов

В данном примере показано размещение слоя шириной 40% по центру.
Хотя сама ширина никак напрямую не задается, она определяется значением свойств
margin-left и margin-right. Они устанавливают отступ слева и справа,
чтобы слой располагался по середине, их значения должны быть равны.

Следующий способ более универсален и уже не зависит от того, какие единицы
измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).

Пример 3. Применение значения auto

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

Text-decoration, text-align, text-indent в CSS

Как же в Css работать с текстом? Вполне логично будет предположить, что для этой цели существуют специально предназначенные правила. Давайте начнем с text-align, которое является фактически заменой атрибута align (он использовался в чистом Html 4.01 по версии валидатора для выравнивания содержимого, например, абзацев P или заголовков).

Он имеет всего четыре возможных значения:

Смысл остается таким же, как и был раньше. Text align — это горизонтальное выравнивание строк. Применяется это правило исключительно только для блочных элементов (параграфы, заголовки и т.п.), т.е. тех тегах, в которых может появиться несколько строк. Т.к. в строчных элементах строк может быть только одна, то и смысла использования в них text-align особого нет.

Понятно, что значения этого правила означают выравнивание, соответственно: по левому краю (left), по правому краю (right), по центру (center) и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Само собой, что значение Justify стоит использовать для элементов хотя бы с несколькими строками текста, иначе видимого эффекта от этого не будет.

Для примера, я выровнял предыдущий абзац по ширине (видите у него ровные границы и слева, и справа), используя:

text-align:justify;

По умолчанию горизонтальное выравнивание текста осуществляется по левому краю, т.е. специально писать text-align:left не нужно, если, конечно же, раньше вы не задавали другое выравнивание. Этот абзац я, кстати, выровнял по центру (center) опять же для наглядного примера, но тут, я думаю, все и так понятно.

Следующее Css правило text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус, используя размеры (пиксели, em или ex) допустимые в CSS) или с помощью процентов:

От чего считаются проценты в text-indent? От ширины области, которая отведена под текст. Т.е. Css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. Ну, а этот абзац как раз и служит примером такого правила.

А можно, например, задать отрицательное значение красной строки в text-indent и тогда мы получим примерно то, что вы видите в этом абзаце. Для достижения данного результата я написал для тега абзаца P вот такое вот CSS правило:

text-indent:-1em;

Ну, а обычное использование text-indent (для задания стандартной красной строки) может выглядеть так: text-indent:40px; (кстати, применено к этому параграфу). Это правило, так же как и рассмотренное раньше text-align, применяется только для блочных элементов, т.е. там, где может появиться несколько строк (абзацы, заголовки и т.п.).

Так, теперь давайте перейдем к text-decoration (оформление с помощью горизонтальной линии), которое применяется уже ко всем Html элементам (и строчным, и блочным).

Оно может иметь всего четыре значения:

Т.е. можно использовать с помощью text-decoration: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну, или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, гиперссылки (тег A) (они по умолчанию подчеркиваются).

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

Если текст гиперссылки нужно будет сделать неподчеркнутым (например, в меню), то используйте для text decoration элемента гиперссылки значение none.

Нюансом в использовании Css правила text-decoration является то, что можно будет прописать сразу три (иди два) значения для любого Html элемента (опуская none) и в результате вы получите надчеркнуто-подчеркнуто-перечеркнутый фрагмент текста (прикольно звучит и смотрится, не правда ли?):

text-decoration:underline overline line-through;

Значения для text decoration (если вы хотите использовать сразу несколько из них) нужно писать через символ пробел.

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

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

margin:0 auto;

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

Display: flex и выравнивание

Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять «display: flex». Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать «margin: auto» для центрирования контента внутри.

Пока что такой способ практически не встречался мне, но особых ограничений для него нет. 

.example-wrapper7{
display: flex; 
height: 300px;  
background: #AEB96A;
}

.example-wrapper7 img{
margin: auto;
}

Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!

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

Выравнивание посредством «text-align: center»

Для выравнивания текста в блоке есть специальное свойство «text-align». При установленном значении «center» каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

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

.example-text{
text-align: center;
padding: 10px;
background: #FF90B8;
}

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).

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

.example-wrapper3{
text-align: center;
background: #FF90B8;
}

.inline-text{
display: inline-block;
width: 40%;
padding: 10px;
text-align: left;
background: #FFE5E5;
}

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto» (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper{
height: 200px;
background: #F1BF88;
}

.lama1{
height: 200px;
width: 200px;
background: url(lama.jpg);
margin: 0 auto;
}

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

2-ой метод

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

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

Минусы

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

Центровка с помощью table-cell

Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.

<div class="center-aligned">
<div class="center-core">
<img src="jimmy-choo-shoe.jpg">
</div>
</div>

CSS:

.center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; }
.center-core { display: table-cell; text-align: center; vertical-align: middle; }
.center-core img { width: 33%; height: auto; }

Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.

Правило для «по середине» (существительное с предлогом)

Если же данное словосочетание представлено существительным с предлогом, его написание будет раздельным. Мы можем проверить себя постановкой вопроса от существительного «середине» к зависимому слову: По середине чего? Наличие зависимого слова, либо определения, способного «разбить» существительное и предлог, будут указывать на раздельное написание: По (самой) середине реки.

Примеры

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

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

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

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

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

<div class=container3>
  <p>Этот абзац…
</div>

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

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

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

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

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

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

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