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

Содержание:

Автоматический отступ
Выравнивание по горизонтальному центру блочных (block) элементов с помощью margin: auto
Выравнивание элементов. align-items и align-self
- Свойство align-items
- Свойство align-self
Выравнивание текста по центру CSS
Выравнивание текста с помощью CSS
CSS — Выравнивание по горизонтали
Отступы
Вариант 2
Уникальное позиционирование элементов
Используем свойства Grid-модели
Отрицательный отступ
Выравнивание блока по центру в CSS
Property Values
Центрируем два адаптивных div-элемента рядом друг с другом
How to Center Vertically

Автоматический отступ

Этот способ напоминает предыдущий. Но здесь необходимо выставить атрибуты top, right, bottom и left на 0, а величину отступа выставить на auto. Огромное преимущество метода – наличие рабочих скроллбаров родительского элемента. Но недостаток способа такой же, как и у предыдущего – необходимость жестко задавать размеры блока.
Код выглядит следующим образом.

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

.block {
    width: 250px;
    height: 250px;
    position: absolute;

/* Выставляем параметры top, right, bottom, left на 0, а margin – на auto */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    
    img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border: none;
    }
}
</style>

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

Выравнивание по горизонтальному центру блочных (block) элементов с помощью margin: auto

Css layout — horizontal & vertical align- выравнивание

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

.container {
width: 90%;
max-width: 1200px;
padding-left: 15px;
padding-right: 15px;
margin: auto;
}

1
2
3
4
5
6
7

.container{

width90%;

max-width1200px;

padding-left15px;

padding-right15px;

marginauto;

}

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

Центрируем форму за счет margin: auto

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

<style>

#center-form {

width350px;

height200px;

padding20px;

border3pxdouble#1e8cbe;

border-radius12px;

margin20pxauto;

}
</style>

<button class=»button»>Войти<button>

<form>

<div>

Смотрим на результат:

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

Выравнивание элементов. align-items и align-self

Как выровнять блок по центру — полное руководство по центрированию div-элемента

Последнее обновление: 18.04.2017

Свойство align-items

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			
			.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 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
			.color4 {background-color: #2A9FBC;}
        </style>
    </head>
    <body>
		<h3>Flex-start</h3>
		<div class="flex-container flex-start">
			<div class="flex-item color1">Flex Item 1</div>
			<div class="flex-item color2">Flex Item 2</div>
			<div class="flex-item color3">Flex Item 3</div>
			<div class="flex-item color4">Flex Item 4</div>
		</div>
		<h3>Flex-end</h3>
		<div class="flex-container flex-end">
			<div class="flex-item color1">Flex Item 1</div>
			<div class="flex-item color2">Flex Item 2</div>
			<div class="flex-item color3">Flex Item 3</div>
			<div class="flex-item color4">Flex Item 4</div>
		</div>
		<h3>Center</h3>
		<div class="flex-container center">
			<div class="flex-item color1">Flex Item 1</div>
			<div class="flex-item color2">Flex Item 2</div>
			<div class="flex-item color3">Flex Item 3</div>
			<div class="flex-item color4">Flex Item 4</div>
		</div>
		<h3>Baseline</h3>
		<div class="flex-container baseline">
			<div class="flex-item color1">Flex Item 1</div>
			<div class="flex-item color2 largest-item">Flex Item 2</div>
			<div class="flex-item color3">Flex Item 3</div>
			<div class="flex-item color4">Flex Item 4</div>
		</div>
</html>

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

.flex-container {
	display: flex;
	border:1px #ccc solid;
	flex-direction:column;
	width:12em;
}

Свойство align-self

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.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 {background-color: #675BA7; align-self: center; }
			.item2 {background-color: #9BC850; align-self: flex-start;}
			.item3 {background-color: #A62E5C; align-self: flex-end;}
			.item4 {background-color: #2A9FBC; align-self: center;}
        </style>
    </head>
    <body>
		<h3>Align-self</h3>
		<div class="flex-container">
			<div class="flex-item item1">Flex Item 1</div>
			<div class="flex-item item2">Flex Item 2</div>
			<div class="flex-item item3">Flex Item 3</div>
			<div class="flex-item item4">Flex Item 4</div>
		</div>
</html>

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

НазадВперед

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

Как вставить картинку в html-код веб-страницы + настройки атрибутов тега «img»; стилизация графики с помощью css: выравнивание, отступы, изображение фоном, ссылкой или в кнопках, а также эффекты при наведении

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

Зададим для блока с текстом, который мы использовали в первом примере, выравнивание текста по ширине в CSS:

CSS

.text-vertical-al p{
display:table-cell;
vertical-align:middle;
text-align:center;
}

1
2
3
4
5

.text-vertical-al p{

displaytable-cell;

vertical-alignmiddle;

text-aligncenter;

}

Теперь текст выровнен точно по центру блока:

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

Обратите внимание! Свойство text-align:center; задано для тега , так как в данном случае абзац является родительским блоком для текста.

Выравнивание текста с помощью 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. Многочисленные возможные значения дают слишком разный результат в различных случаях.

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

1. Выравнивание одного блочного элемента () относительно другого (в котором он расположен) по горизонтали:

HTML-код:

<div>
  ...
  <div class="block">
    ...
  </div>
</div>

CSS-код:

.block {
  margin-left: auto;
  margin-right: auto;
}

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

Chrome 1.0+
Firefox 1.0+
Internet Explorer 6.0+
Opera 3.5+
Safari 1.0+

2. Выравнивание строчного () или строчно-блочного () элемента по горизонтали:

HTML-код:

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

CSS-код:

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

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

Chrome 1.0+
Firefox 3.0+
Internet Explorer 8.0+
Opera 7.0+
Safari 1.0+

Отступы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-indent</title>
  <style>
   #a { text-indent: 53px;    }
#b { text-indent: -43px;    }
div {
background: #FFDAB9;
width:35%;
font-size:29px;
margin-left: 30%;
padding-left:50px;
}
  </style> 
 </head> 
 <body>
<div>
   <p id="a">Для создания красной строки нужно знать всего лишь один параметр.</p>
   <p id="b">Им является простое свойство text-indent.</p>
</div>
 </body>
</html>

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

Прочитано: 1405 раз

Вариант 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; } }

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

Уникальное позиционирование элементов

Рано или поздно каждый пожелает точно позиционировать элемент, но float или строчно-блочные элементы не позволяют проделать такой трюк. Обтекаемые элементы, которые удаляют элемент из потока страницы, часто приводят к нежелательным результатам, поскольку окружающие элементы обтекают вокруг элемента с float. Строчно-блочные элементы, если только мы не создаём колонки, могут быть довольно неудобны, когда дело касается правильного положения. Для подобных ситуаций мы можем использовать свойство position в сочетании со свойствами смещения блока.

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

По умолчанию у каждого элемента значение position установлено как static, это означает, что элемент существует в обычном потоке документа и не принимает какие-либо свойства для его смещения. Значение static наиболее часто переписывается значением relative или absolute, которые мы рассмотрим дальше.

Относительное позиционирование

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

HTML

CSS

Демонстрация относительного позиционирования

Здесь для второго элемента <div> с классом offset задано значение position как relative, а также два свойства смещения — left и top. Это сохраняет исходное положение элемента и другим элементам не разрешено двигаться в эту область. Кроме того, свойства смещения перемещают элемент, выталкивая его на 20 пикселей от левого и на 20 пикселей от верхнего исходного местоположения.

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

Свойство top со значением 20 пикселей затем будет толкать элемент вниз на 20 пикселей.

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

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

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

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

HTML

CSS

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

В этом примере элемент <section> позиционируется относительно, но не включает каких-либо свойств смещения. Следовательно, его положение не меняется. Элемент <div> с классом offset включает значение position как absolute. Поскольку элемент <section> является ближайшим относительно позиционированным родительским элементом для <div>, то элемент <div> будет позиционироваться относительно элемента <section>.

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

В результате свойств right и top, элемент <div> появится в 20 пикселях справа и 20 пикселях сверху внутри <section>.

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

Используем свойства Grid-модели

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

CSS

.banner{
display: grid;
justify-items: center;
align-items: center;
}

1
2
3
4
5

.banner{

displaygrid;

justify-itemscenter;

align-itemscenter;

}

Практический пример с баннером:

See the Pen Grid centered banner by Elen (@ambassador) on CodePen.dark

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

Центрирование с помощью Grid

.banner{
display: grid;
place-items: center;
}

1
2
3
4

.banner{

displaygrid;

place-itemscenter;

}

See the Pen Centered Grid property place-items: center by Elen (@ambassador) on CodePen.dark

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

Применяем к блоку свойства 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

Так же, используя это свойство можно сделать в 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.

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

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

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

Property Values

Value	Description	Play it
stretch	Default value. Lines stretch to take up the remaining space	Play it »
center	Lines are packed toward the center of the flex container	Play it »
flex-start	Lines are packed toward the start of the flex container	Play it »
flex-end	Lines are packed toward the end of the flex container	Play it »
space-between	Lines are evenly distributed in the flex container	Play it »
space-around	Lines are evenly distributed in the flex container, with half-size spaces on either end	Play it »
space-evenly	Lines are evenly distributed in the flex container, with equal space around them	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

Центрируем два адаптивных div-элемента рядом друг с другом

Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

CSS

.container
{
     text-align: center;
}
.left-div
{
     display: inline-block;
     max-width: 300px;
     vertical-align: top;
}
.right-div
{
     display: inline-block;
     max-width: 150px;
}
 screen and (max-width: 600px) 
{
     .left-div, .right-div
     {
        lef  max-width: 100%;
     }
}

HTML

<div class="container"><div class="left-div"></div><div class="right-div"></div></div>

Здесь у нас несколько элементов с примененным свойством inline-block, расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.

How to Center Vertically

Centering elements vertically without modern methods like Flexbox can be a real chore. Here we’ll go over some of the older methods to center things vertically first, then show you how to do it with Flexbox.

How to Center a Div Vertically with CSS Absolute Positioning and Negative Margins

For a long time this was the go-to way to center things vertically. For this method you must know the height of the element you want to center.

First, set the property of the parent element to .

Then for the child element, set the property to and to :

But that really just vertically centers the top edge of the child element.

To truly center the child element, set the property to :

How to Center a Div Vertically with Transform and Translate

If you don’t know the height of the element you want to center (or even if you do), this method is a nifty trick.

This method is very similar to the negative margins method above. Set the property of the parent element to .

For the child element, set the property to and set to . Now instead of using a negative margin to truly center the child element, just use :

Note that is shorthand for and . You could also write to center the child element vertically.

How to Center a Div Vertically with Flexbox

Like centering things horizontally, Flexbox makes it super easy to center things vertically.

To center an element vertically, apply and to the parent element: