Центрирование элементов в css

Содержание:

Как выровнять несколько картинок по центру в css
- Пример как выровнять 3 изображения по центру в css Результат в браузереКод страницы <!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″ /> <title>Тестовая страница</title> </head> <body> <div style=»text-align:center»> <img src=»my_img/1.jpg» style=»margin:0px 10px 0px 10px; » > <img src=»my_img/1.jpg» style=»margin:0px 10px 0px 10px; » > <img src=»my_img/1.jpg» style=»margin:0px 10px 0px 10px; » > </div> </body> </html>
Центрируем DIV по нижней границе страницы
Выравнивание текста по вертикали HTML & CSS
DIV-элемент, центрированный при помощи Flexbox
Используем свойства position: absolute и transform: translate
Выравнивание по горизонтали
- Выравнивание по верхнему краю
- Выравнивание по центру
How to Center Both Vertically and Horizontally
- How to Center a Div Vertically and Horizontally with Transform and Translate
- How to Center a Div Vertically and Horizontally with Flexbox
flexbox CSS
Вариант 2
CSS Reference
CSS Properties
Выравнивание блока по центру в CSS
Изображения
Отрицательный отступ
Вертикальное и горизонтальное центрирование в CSS уровня 3
Centering vertically in CSS level 3

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

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

Выравнивание нескольких изображений по центру в css делается с помощью размещения всех картинок
внутри родительского тега <div>, который по умолчанию уже является блочными элементом,
т. е. растянут на всю ширину.
Но у тега <div> по умолчанию строчное выравнивание по левому краю, поэтому нужно установить
свойству text-align значение «center», тогда все его содержание будет выровнено по центру.
Должно получиться примерно так: <div style=»text-align:center»>…тут картинки…</div>.

Дополнительно у каждого изображения можно задать отступы, чтобы они не слипались друг с другом, а находились на некотором
расстоянии между собой. Отступы делаются, через то же свойство margin, рассмотренное выше.
У margin: y1 x1 y2 x2, цифры в пикселях y1 x1 y2 x2 отвечают за отступ сверху, справа, снизу и
слева соответственно.

Пример как выровнять 3 изображения по центру в css

Результат в браузереКод страницы
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″ />
<title>Тестовая страница</title>
</head>
<body>
<div style=»text-align:center»>
<img src=»my_img/1.jpg» style=»margin:0px 10px 0px 10px; » >
<img src=»my_img/1.jpg» style=»margin:0px 10px 0px 10px; » >
<img src=»my_img/1.jpg» style=»margin:0px 10px 0px 10px; » >
</div>
</body>
</html>

Центрируем DIV по нижней границе страницы

Css медиа запросы — примеры

Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

CSS

.outer-div
{
     position: absolute;
     bottom: 30px;
     width: 100%;
}
.inner-div
{
     margin: 0 auto;
     width: 100px;
     height: 100px;
     background-color: #ccc;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

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

Выравнивание текста по вертикали HTML & CSS

Position

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

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

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

Вертикальное центрирование текста с помощью тега «line-height»

Приведу пример создания кнопки стилями CSS.

Код HTML:

<div id="wrapper">
<div class="button">
Скачать
</div>
</div>

Код CSS:

#wrapper {
}
.button {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  border-radius: 4px;
  color: #555555;
  width:120px;
  margin: 20px auto;
  font-size: 14px;
  text-align:center;
  height: 40px;
  line-height: 40px;
}
.button:hover, a.button:focus {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
  outline: 0 none;
}

Результат: https://jsfiddle.net/k6g1phmf/14/.

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

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

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;  
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 100px;
  margin-top: -70px;
  background: #00f;
  color: white;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/15/.

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

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  display: table;
}
.content {
  background: #f09d06;
  color: white;
  width: 300px;
  display: table-cell;
  height: 200px;
  text-align: center;
  vertical-align: middle;
}

Результат: https://jsfiddle.net/k6g1phmf/18/.

Вертикальное выравнивание блока тегом «transform»

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

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  background: black;
  color: white;
  padding: 20px;
  transform: translateY(-50%);
  resize: vertical;
  overflow: auto;
}

Результат: https://jsfiddle.net/k6g1phmf/16/.

Выравнивание по вертикали с использованием «display:flex»

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

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  background: black;
  color: white;
  width: 50%;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/17/.

Теперь вы знаете как выровнять текст в CSS. Материал получился объемный, но зато очень полезный. Выравнивание текста и блоков посредством CSS, первостепенные знания, без которых не получится адекватно сверстать сайт.

Интересненько!Нужно срочно изучить!

DIV-элемент, центрированный при помощи Flexbox

Css свойство overflow

Здесь мы располагаем CSS div по центру с помощью Flexbox. Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, а также Android Browser 40+.

CSS

.container
{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
}
.item
{
     background-color: #f3f2ef;
     border-radius: 3px;
     width: 200px;
     height: 100px; 
}

HTML

<div class="container"><div class="item"></div><div>

Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

Используем свойства position: absolute и transform: translate

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

Для горизонтального центрирования абсолютно позиционированного элемента сначала нужно задать свойства для его родителя: и . А для центрируемого элемента, помимо различных «оформительских» свойств (цвета фона, рамки, размера текста, внутренних отступов и т.д.) обязательно нужно указать и . В этом случае можно не задавать ширину или высоту элемента — она будет рассчитана на основе остальных свойств и содержимого. Однако никто не мешает сделать это явно, использовав свойства и .

Выравнивание абсолютно позиционированных элементов

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<style>

.parent {

positionrelative;

min-height140px;

}

.use-transform {

text-aligncenter;

padding20px;

font-size20px;

border3pxdouble#1e8cbe;

background-color#cde;

border-radius12px;

positionabsolute;

left50%;

transformtranslate(-50%);

}
</style>

<div class=»use-transform»>3-йспособ<br>сpositionabsolute<div>

<div>

Давайте посмотрим на примере:

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

Использование отрицательного margin-left для центрирования абсолютно позиционированного объекта

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<style>

.parent-2 {

positionrelative;

min-height230px;

}

#abs-center-img {

width300px;

box-shadow2px18px#909090;

positionabsolute;

left50%;

margin-left-150px;

border2pxsolid#fff;

}
</style>

<div>

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

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

За счет сочетания атрибутов align (горизонтальное
выравнивание) и valign (вертикальное выравнивание)
тега <td>, допустимо устанавливать несколько
видов положений элементов относительно друг друга. На рис. 1 показаны способы
выравнивания элементов по горизонтали.

Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

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

Для указания выравнивания содержимого ячеек по верхнему краю, для тега <td>
требуется установить атрибут valign со значением
top (пример 2).

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

В данном примере характеристики ячеек управляются с помощью параметров тега
<td>, но тоже удобнее изменять через стили.
В частности, выравнивание в ячейках указывается свойствами vertical-align
и text-align (пример 3).

Пример 3. Применение стилей для выравнивания

Для сокращения кода в данном примере используется группирование селекторов,
поскольку свойства vertical-align и padding
применяются одновременно к двум ячейкам.

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

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

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

Рис. 2. Добавление формулы в документ

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

Пример 4. Выравнивание формулы

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

How to Center Both Vertically and Horizontally

This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center.

Set the property of the parent element to .

Then set the child’s property to , to , and to . This just centers the top left corner of the child element vertically and horizontally.

To truly center the child element, apply a negative top margin set to half the child element’s height, and a negative left margin set to half the child element’s width:

How to Center a Div Vertically and Horizontally with Transform and Translate

Use this method to center an element vertically and horizontally if you don’t know its exact dimensions and can’t use Flexbox.

First, set the property of the parent element to .

Next, set the child element’s property to , to , and to .

Finally, use to truly center the child element:

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply and to center the child element(s) horizontally and vertically:

That’s everything you need to know to center with the best of ’em. Now go forth and center all the things.

flexbox CSS

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

Ну а пока вернемся к выравниванию по центру.

Теперь давайте разберемся, что все это значит.

display: flex

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

justify-content: center

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

align-items: center

Кроме основной оси в flexbox есть перпендикулярная ей второстепенная ось. В данном случае, она вертикальная. Свойство описывает, как элементы контейнера расположены относительно нее.

Вот примерно то, что должно получиться.

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

Как вы, наверное догадались я предпочитаю использовать именно этот способ. Но это не значит, что я не пользуюсь другими. Все эти способы можно и нужно использовать (за исключением способа с и display: table-cell ), каждый в своей ситуации. Например, незачем использовать flexbox если вам просто нужно .

Вариант 2

Для центровки блоков придумано очень много способов. А вот если нужно центровку сделать более умной, тут приходиться поломать голову. К счастью, я вывел один интересный способ для следующих целей:

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

Имеем следующую структуру:

Для них прописываем классы:

.archive-container-for-articles { width: 90%; margin: 0 auto; } .archive-article { display: inline-block; vertical-align: top; width: calc(33.3333% — ( 0.666666666667 * 36px ) ); margin: 0 10px 0 11px; }

Следует обратить внимание, что если менять размеры calc, то затем надо подстраивать экспериментальным путём размеры margin. Иначе блоки не будет располагаться по центру

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

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

А если мы хотим, чтобы на мобильной версии было не 3 блока, а 2, то в ccs для разрешения 768 пикселей, разобьём блоки иначе:

@media screen and (max-width: 768px) { .archive-article { width: calc(47.3333% — ( 0.666666666667 * 25px ) ); margin: 0 10px 0 20px; } }

Получим те же блоки в мобильном варианте, но уже по два блока на строку:

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

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

Так же, используя это свойство можно сделать в CSS выравнивание блока по центру. При этом данное свойство указываем для родительского блока, а для блока, который нужно выровнять задаем display:inline-block.

XHTML

<div class=»center-block»>
<div class=»centered»>
Выравнивание блока по центру в CSS
</div>
</div>

1
2
3
4
5

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

CSS

.center-block{
height:200px;
background:#E8E8FF;
border:1px solid #F0F0F0;
text-align:center;
}
.centered{
display:inline-block;
width:150px;
height:50px;
background:#8CC684;
border:1px solid #ccc;
margin-top:75px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.center-block{

height200px;

background#E8E8FF;

border1pxsolid#F0F0F0;

text-aligncenter;

}

.centered{

displayinline-block;

width150px;

height50px;

background#8CC684;

border1pxsolid#ccc;

margin-top75px;

}

В результате получаем вот такое выравнивание:

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

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

PHP

.centered{
width:150px;
height:50px;
background:#8CC684;
border:1px solid #c1c1c1;
margin:auto;
}

1
2
3
4
5
6
7

.centered{

width150px;

height50px;

background#8CC684;

border1pxsolid#c1c1c1;

marginauto;

}

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

Для того чтобы задать, к примеру, отступ сверху и снизу по 50px можно написать так:

margin: 50px auto;

Если нужно задать сверху одно значения для отступа, а снизу другое, то можно использовать такой вариант:

margin: 50px auto 20px auto;

В этом случае отступ сверху будет 50px, снизу – 20px, а по горизонтали блок будет выравниваться по центру.

Результат получается почти такой же:

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

Выровнять блок по центру получилось, но есть одно отличие. Как видите, тест в блоке теперь не выравнивается. Теперь, при необходимости сделать выравнивание текста по центру css, нужно для класса centered задать text-align:center.

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

А на сегодня у меня все. Желаю вам успешной работы над вашими проектами! До встречи в следующих статьях!

С уважением Юлия Гусарь

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Отрицательный отступ

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

<div class="parent">
    <div class="block">
        <img src="test.jpg" alt=""/>
    </div>
</div>

CSS в таком случае будет следующим.

.parent {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
}

.block {
    width: 250px; /* Задаем ширину */
    height: 250px; /* Задаем высоту */
    position: absolute;
    top: 50%; /* Отступ сверху на половину родительского блока */
    left: 50%; /* Отступ слева на половину родительского блока */
    margin: -125px 0 0 -125px; /* Отступ на половину блока с помощью отрицательного margin */
    
    img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border: none;
    }
}

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

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

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

Центр!

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

<div class=container4>
  <p>Центр!
</div>

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

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

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

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

Центр!

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

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

Centering vertically in CSS level 3

CSS level 3 offers other possibilities. At this time (2014), a
good way to center blocks vertically without using absolute
positioning (which may cause overlapping text) is still under
discussion. But if you know that overlapping text will not be a
problem in your document, you can use the ‘transform’ property to
center an absolutely positioned element. For example:

This paragraph is vertically centered.

For a document that looks like this:

<div class=container3>
  <p>This paragraph…
</div>

the style sheet looks like this:

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

The essential rules are:

Make the container relatively positioned, which
declares it to be a container for absolutely positioned elements.
Make the element itself absolutely positioned.
Place it halfway down the container with ‘top: 50%’. (Note
that 50%’ here means 50% of the height of the container.)
Use a translation to move the element up by half its own
height. (The ‘50%’ in ‘translate(0, -50%)’ refers to the height of
the element itself.)

Recently (since about 2015), another technique has also become
available in several CSS implementations. It is based on the new
‘flex’ keyword for the ‘display’ property. This keyword is meant
for use in graphical user interfaces (GUIs), but nothing stops you
from using it in a document, if the document happens to have the
right structure.

This paragraph is vertically centered.

the style sheet looks like this: