0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Во frontend-разработке неизбежное зло - это вёрстка. Насколько бы навороченными не были фреймворки для построения UI, рано или поздно возникнет необходимость в вёрстке. Да и жизнь осложняется тем, что в CSS нет полифиллов, как таковых.</p>
1
<p>Во frontend-разработке неизбежное зло - это вёрстка. Насколько бы навороченными не были фреймворки для построения UI, рано или поздно возникнет необходимость в вёрстке. Да и жизнь осложняется тем, что в CSS нет полифиллов, как таковых.</p>
2
<p>В этой заметке разберём один популярный вопрос на собеседовании. Встретить в сети полный перечень всех способов с учётом современных возможностей непросто. Тем не менее они так или иначе присутствуют на просторах.</p>
2
<p>В этой заметке разберём один популярный вопрос на собеседовании. Встретить в сети полный перечень всех способов с учётом современных возможностей непросто. Тем не менее они так или иначе присутствуют на просторах.</p>
3
<p>Для всех нетривиальных способов даны ссылки, которые помогут в изучении той или иной технологии. Поэтому данный материал будет полезен не только новичкам, но и тем, кто хочет пополнить собственную коллекцию приёмов.</p>
3
<p>Для всех нетривиальных способов даны ссылки, которые помогут в изучении той или иной технологии. Поэтому данный материал будет полезен не только новичкам, но и тем, кто хочет пополнить собственную коллекцию приёмов.</p>
4
<h2>Вопрос в студию</h2>
4
<h2>Вопрос в студию</h2>
5
<p><strong>Есть два div-а:</strong></p>
5
<p><strong>Есть два div-а:</strong></p>
6
&lt;div class="parent"&gt; &lt;div class="child"&gt; &lt;/div&gt; &lt;/div&gt;<p><strong>Назовите все способы выровнять внутренний</strong>.child<strong>по центру по горизонтали относительно</strong>.parent.<strong>Вот так:</strong></p>
6
&lt;div class="parent"&gt; &lt;div class="child"&gt; &lt;/div&gt; &lt;/div&gt;<p><strong>Назовите все способы выровнять внутренний</strong>.child<strong>по центру по горизонтали относительно</strong>.parent.<strong>Вот так:</strong></p>
7
<p>Ссылка на эту картинку в<a>CodePen</a>. Число способов, которые предоставит соискатель, неплохо коррелирует с опытом в вёрстке. Все приведённые приёмы доступны и<a>здесь</a>.</p>
7
<p>Ссылка на эту картинку в<a>CodePen</a>. Число способов, которые предоставит соискатель, неплохо коррелирует с опытом в вёрстке. Все приведённые приёмы доступны и<a>здесь</a>.</p>
8
<h2>Вариант #01 - margin</h2>
8
<h2>Вариант #01 - margin</h2>
9
<p>Первое, что приходит в голову (в пикселях):</p>
9
<p>Первое, что приходит в голову (в пикселях):</p>
10
.parent { width: 400px; } .child { width: 200px; margin-left: 100px; }<p>Ссылка на<a>CodePen</a>.</p>
10
.parent { width: 400px; } .child { width: 200px; margin-left: 100px; }<p>Ссылка на<a>CodePen</a>.</p>
11
<p><strong>Плюсы и минусы:</strong>- это просто; - здесь необходимо, чтобы были заданы размеры div-ов; - соответственно, необходимо заранее вычислить размеры div-ов и margin; - и, конечно, это никак не responsive.</p>
11
<p><strong>Плюсы и минусы:</strong>- это просто; - здесь необходимо, чтобы были заданы размеры div-ов; - соответственно, необходимо заранее вычислить размеры div-ов и margin; - и, конечно, это никак не responsive.</p>
12
<p>То же самое в процентах:</p>
12
<p>То же самое в процентах:</p>
13
.parent { width: 400px; } .child { width: 50%; margin-left: 25%; }<p>Ссылка на<a>CodePen</a>.</p>
13
.parent { width: 400px; } .child { width: 50%; margin-left: 25%; }<p>Ссылка на<a>CodePen</a>.</p>
14
<p><strong>Плюсы и минусы:</strong>- по сути, то же самое что и первое; - но уже лучше - вычислять абсолютные размеры .child div-а и margin мы заставляем браузер; - ну, хоть какое-то responsive.</p>
14
<p><strong>Плюсы и минусы:</strong>- по сути, то же самое что и первое; - но уже лучше - вычислять абсолютные размеры .child div-а и margin мы заставляем браузер; - ну, хоть какое-то responsive.</p>
15
<h2>Вариант #02 - padding и box-sizing</h2>
15
<h2>Вариант #02 - padding и box-sizing</h2>
16
.parent { width: 400px; padding-left: 100px; box-sizing: border-box; } .child { width: 200px; }<p>Ссылка на<a>CodePen</a>.</p>
16
.parent { width: 400px; padding-left: 100px; box-sizing: border-box; } .child { width: 200px; }<p>Ссылка на<a>CodePen</a>.</p>
17
<p>С padding-ами не так просто - именно теми пикселями можно задать, только зная об одной особенности.</p>
17
<p>С padding-ами не так просто - именно теми пикселями можно задать, только зная об одной особенности.</p>
18
<p>По умолчанию, у .parent стоит box-sizing: content-box, и это означает, что width задаёт размер контента без учёта padding. Т.е. размер .parent будет в данном случае 500px. Подробнее про<a>box-sizing</a>и<a>CSS Box Model</a>.</p>
18
<p>По умолчанию, у .parent стоит box-sizing: content-box, и это означает, что width задаёт размер контента без учёта padding. Т.е. размер .parent будет в данном случае 500px. Подробнее про<a>box-sizing</a>и<a>CSS Box Model</a>.</p>
19
<p><strong>Плюсы и минусы:</strong>- в принципе, все предыдущие плюсы и минусы имеют место; - да, и box-sizing это<a>CSS3</a></p>
19
<p><strong>Плюсы и минусы:</strong>- в принципе, все предыдущие плюсы и минусы имеют место; - да, и box-sizing это<a>CSS3</a></p>
20
<h2>Вариант #03 - padding-и</h2>
20
<h2>Вариант #03 - padding-и</h2>
21
<p>Конечно, зная об этом, можно достаточно просто написать вот это:</p>
21
<p>Конечно, зная об этом, можно достаточно просто написать вот это:</p>
22
.parent { width: 200px; padding-left: 100px; padding-right: 100px; } .child { width: 100%; }<p>Ссылка на<a>CodePen</a>.</p>
22
.parent { width: 200px; padding-left: 100px; padding-right: 100px; } .child { width: 100%; }<p>Ссылка на<a>CodePen</a>.</p>
23
<p><strong>Плюсы и минусы:</strong>- в принципе, все предыдущие комментарии имеют здесь место; - а вот полный размер контейнера уже не так тривиально определить/задать.</p>
23
<p><strong>Плюсы и минусы:</strong>- в принципе, все предыдущие комментарии имеют здесь место; - а вот полный размер контейнера уже не так тривиально определить/задать.</p>
24
<h2>Вариант #04 - transparent border</h2>
24
<h2>Вариант #04 - transparent border</h2>
25
.parent { width: 200px; border-left: 100px solid transparent; border-right: 100px solid transparent; } .child { width: 100%; }<p>Ссылка на<a>CodePen</a>.</p>
25
.parent { width: 200px; border-left: 100px solid transparent; border-right: 100px solid transparent; } .child { width: 100%; }<p>Ссылка на<a>CodePen</a>.</p>
26
<p>Стоит отметить, что для правильного варианта обязательно задавать<a>border-style</a>(solid - один из вариантов, главное, что не дефолтный none), ну и, конечно, прозрачный цвет transparent.</p>
26
<p>Стоит отметить, что для правильного варианта обязательно задавать<a>border-style</a>(solid - один из вариантов, главное, что не дефолтный none), ну и, конечно, прозрачный цвет transparent.</p>
27
<p><strong>Плюсы и минусы:</strong>- оригинально; - но сложно для чтения и понимания.</p>
27
<p><strong>Плюсы и минусы:</strong>- оригинально; - но сложно для чтения и понимания.</p>
28
<h2>Вариант #05 - margin auto</h2>
28
<h2>Вариант #05 - margin auto</h2>
29
<p>А вот это, первое придёт на ум чуть более опытному верстальщику.</p>
29
<p>А вот это, первое придёт на ум чуть более опытному верстальщику.</p>
30
.parent { width: 400px; } .child { width: 200px; margin-left: auto; margin-right: auto; }<p>Ссылка на<a>CodePen</a>.</p>
30
.parent { width: 400px; } .child { width: 200px; margin-left: auto; margin-right: auto; }<p>Ссылка на<a>CodePen</a>.</p>
31
<p>Да, это так аккуратно записали margin: 0 auto. Просто мы ничего не знаем о верхней границе, и не задаём 0.</p>
31
<p>Да, это так аккуратно записали margin: 0 auto. Просто мы ничего не знаем о верхней границе, и не задаём 0.</p>
32
<p><strong>Плюсы и минусы:</strong>- это очень просто и популярно; - margin считает сам браузер; - нужно задавать явно размер div-а явно. Если этого не сделать, то auto будет равно 0.</p>
32
<p><strong>Плюсы и минусы:</strong>- это очень просто и популярно; - margin считает сам браузер; - нужно задавать явно размер div-а явно. Если этого не сделать, то auto будет равно 0.</p>
33
<h2>Вариант #06 - с помощью CSS-препроцессоров</h2>
33
<h2>Вариант #06 - с помощью CSS-препроцессоров</h2>
34
<p>Если имеются CSS-препроцессоры (скажем, Less), то вычисления соответствующих границ можно переложить на них. Не забудем про эту возможность:</p>
34
<p>Если имеются CSS-препроцессоры (скажем, Less), то вычисления соответствующих границ можно переложить на них. Не забудем про эту возможность:</p>
35
@parent-width: 400px; @child-width: 200px; @child-margin: (@parent-width - @child-width) / 2; .parent { width: @parent-width; } .child { width: @child-width; margin-left: @child-margin; }<p>Ссылка на<a>CodePen</a>.</p>
35
@parent-width: 400px; @child-width: 200px; @child-margin: (@parent-width - @child-width) / 2; .parent { width: @parent-width; } .child { width: @child-width; margin-left: @child-margin; }<p>Ссылка на<a>CodePen</a>.</p>
36
<p>Это<a>Less</a>, а ещё есть<a>SASS</a>, SCSS, PostCSS и другие.</p>
36
<p>Это<a>Less</a>, а ещё есть<a>SASS</a>, SCSS, PostCSS и другие.</p>
37
<p><strong>Плюсы и минусы</strong>: - в итоговой CSS это будут всё те же пиксели.</p>
37
<p><strong>Плюсы и минусы</strong>: - в итоговой CSS это будут всё те же пиксели.</p>
38
<h2>Вариант #07 - CSS-переменные и calc</h2>
38
<h2>Вариант #07 - CSS-переменные и calc</h2>
39
<p>Мало кто знает, но и в CSS есть экспериментальные переменные, а ещё и оператор calc:</p>
39
<p>Мало кто знает, но и в CSS есть экспериментальные переменные, а ещё и оператор calc:</p>
40
:root { --parent-width: 400px; --child-width: 200px; } .parent { width: var(--parent-width); } .child { width: var(--child-width); margin-left: calc((var(--parent-width) - var(--child-width)) / 2); }<p>Ссылка на<a>CodePen</a>.</p>
40
:root { --parent-width: 400px; --child-width: 200px; } .parent { width: var(--parent-width); } .child { width: var(--child-width); margin-left: calc((var(--parent-width) - var(--child-width)) / 2); }<p>Ссылка на<a>CodePen</a>.</p>
41
<p>Про CSS-переменные можно прочитать<a>здесь</a>, а про calc -<a>здесь</a>. Ну и, конечно, стоит ознакомиться с поддержкой -<a>здесь</a>и<a>здесь</a>, соответственно.</p>
41
<p>Про CSS-переменные можно прочитать<a>здесь</a>, а про calc -<a>здесь</a>. Ну и, конечно, стоит ознакомиться с поддержкой -<a>здесь</a>и<a>здесь</a>, соответственно.</p>
42
<h2>Вариант #08 - position: relative</h2>
42
<h2>Вариант #08 - position: relative</h2>
43
.parent { width: 400px; } .child { position: relative; width: 200px; left: 100px; }<p>Ссылка на<a>CodePen</a>Здесь, в принципе, всё понятно. Для тех, кто впервые видит<a>position</a>.</p>
43
.parent { width: 400px; } .child { position: relative; width: 200px; left: 100px; }<p>Ссылка на<a>CodePen</a>Здесь, в принципе, всё понятно. Для тех, кто впервые видит<a>position</a>.</p>
44
<h2>Вариант #09 - position: absolute</h2>
44
<h2>Вариант #09 - position: absolute</h2>
45
<p>А вот про это стоит спросить отдельно.</p>
45
<p>А вот про это стоит спросить отдельно.</p>
46
.parent { position: relative; width: 400px; } .child { position: absolute; left: 100px; right: 100px; }<p>Ссылка на<a>CodePen</a>Этот вариант достаточно хорошо коррелирует с опытом вёрстки. Предлагаем читателям самостоятельно разобраться, почему необходимо указать position: relative у parent-а.</p>
46
.parent { position: relative; width: 400px; } .child { position: absolute; left: 100px; right: 100px; }<p>Ссылка на<a>CodePen</a>Этот вариант достаточно хорошо коррелирует с опытом вёрстки. Предлагаем читателям самостоятельно разобраться, почему необходимо указать position: relative у parent-а.</p>
47
<p><strong>Плюсы и минусы:</strong>- да, здесь не задаётся ширина у .child.</p>
47
<p><strong>Плюсы и минусы:</strong>- да, здесь не задаётся ширина у .child.</p>
48
<h2>Вариант #10 - translateX(-50%)</h2>
48
<h2>Вариант #10 - translateX(-50%)</h2>
49
.parent { width: 400px; } .child { position: relative; width: 200px; left: 50%; transform: translateX(-50%) }<p>Ссылка на<a>CodePen</a>Подробнее с возможностями transform можно ознакомиться<a>здесь</a>.</p>
49
.parent { width: 400px; } .child { position: relative; width: 200px; left: 50%; transform: translateX(-50%) }<p>Ссылка на<a>CodePen</a>Подробнее с возможностями transform можно ознакомиться<a>здесь</a>.</p>
50
<p><strong>Плюсы и минусы:</strong>- не самый очевидный трюк; - хотя довольно встречается на просторах сети.</p>
50
<p><strong>Плюсы и минусы:</strong>- не самый очевидный трюк; - хотя довольно встречается на просторах сети.</p>
51
<h2>Вариант #11 - эклектика</h2>
51
<h2>Вариант #11 - эклектика</h2>
52
<p>На просторах сети можно встретить и такого монстра:</p>
52
<p>На просторах сети можно встретить и такого монстра:</p>
53
.parent { position: relative; width: 400px; } .child { position: absolute; width: 200px; left: 50%; margin-left: -100px; }<p>Ссылка на<a>CodePen</a>. Предлагаем читателям самостоятельно разобраться, что здесь происходит, и почему это не самый лучший пример. Да, здесь 100px = ширина .child / 2</p>
53
.parent { position: relative; width: 400px; } .child { position: absolute; width: 200px; left: 50%; margin-left: -100px; }<p>Ссылка на<a>CodePen</a>. Предлагаем читателям самостоятельно разобраться, что здесь происходит, и почему это не самый лучший пример. Да, здесь 100px = ширина .child / 2</p>
54
<h2>Вариант #12 - inline-block + text-align</h2>
54
<h2>Вариант #12 - inline-block + text-align</h2>
55
<p>Вот этот вариант коррелирует со знаниями о блочных и inline-элементах:</p>
55
<p>Вот этот вариант коррелирует со знаниями о блочных и inline-элементах:</p>
56
.parent { width: 400px; text-align: center; } .child { display: inline-block; width: 200px; }<p>Ссылка на<a>CodePen</a>.</p>
56
.parent { width: 400px; text-align: center; } .child { display: inline-block; width: 200px; }<p>Ссылка на<a>CodePen</a>.</p>
57
<p>В этом примере блочный элемент div мы сделали строчным, а дальше он выравнивается, как обычный текст.</p>
57
<p>В этом примере блочный элемент div мы сделали строчным, а дальше он выравнивается, как обычный текст.</p>
58
<p>Подробнее о<a>блочных и строчных элементах</a>.</p>
58
<p>Подробнее о<a>блочных и строчных элементах</a>.</p>
59
<h2>Вариант #13 - display: table</h2>
59
<h2>Вариант #13 - display: table</h2>
60
<p>Любители верстать всё в таблицах могут применить свои навыки и для div-ов:</p>
60
<p>Любители верстать всё в таблицах могут применить свои навыки и для div-ов:</p>
61
.parent { display: table; width: 400px; border-collapse: separate; border-spacing: 100px 0; }<p>Ссылка на<a>CodePen</a>. Оставим читателям удовольствие разобраться самостоятельно с этим примером.</p>
61
.parent { display: table; width: 400px; border-collapse: separate; border-spacing: 100px 0; }<p>Ссылка на<a>CodePen</a>. Оставим читателям удовольствие разобраться самостоятельно с этим примером.</p>
62
<h2>Вариант #14 - extra div + float</h2>
62
<h2>Вариант #14 - extra div + float</h2>
63
<p>Если допустить появление дополнительного тега, т. е.:</p>
63
<p>Если допустить появление дополнительного тега, т. е.:</p>
64
&lt;div class="parent"&gt; &lt;div class="extra"&gt; &lt;/div&gt; &lt;div class="child"&gt; &lt;/div&gt; &lt;/div&gt;<p>То можно расположить элементы с помощью float:</p>
64
&lt;div class="parent"&gt; &lt;div class="extra"&gt; &lt;/div&gt; &lt;div class="child"&gt; &lt;/div&gt; &lt;/div&gt;<p>То можно расположить элементы с помощью float:</p>
65
.parent { width: 400px; } .extra { width: 100px; float: left; } .child { width: 200px; float: left; }<p>Ссылка на<a>CodePen</a>. Подробнее о float можно прочитать, есть прекрасная<a>статья</a>.</p>
65
.parent { width: 400px; } .extra { width: 100px; float: left; } .child { width: 200px; float: left; }<p>Ссылка на<a>CodePen</a>. Подробнее о float можно прочитать, есть прекрасная<a>статья</a>.</p>
66
<p><strong>Плюсы и минусы:</strong>- это нечестно, добавить один элемент; - да и разметку следует держать чистой; - но это очень просто.</p>
66
<p><strong>Плюсы и минусы:</strong>- это нечестно, добавить один элемент; - да и разметку следует держать чистой; - но это очень просто.</p>
67
<h2>Вариант #15 - псевдоэлементы + float</h2>
67
<h2>Вариант #15 - псевдоэлементы + float</h2>
68
<p>Как ни странно, но "дополнительные" теги уже есть. Называются они псевдоэлементами. Их можно использовать с тем же успехом:</p>
68
<p>Как ни странно, но "дополнительные" теги уже есть. Называются они псевдоэлементами. Их можно использовать с тем же успехом:</p>
69
.parent { width: 400px; } .parent:before { content: ''; width: 100px; float: left; } .child { width: 200px; float: left; }<p>Ссылка на<a>CodePen</a>.</p>
69
.parent { width: 400px; } .parent:before { content: ''; width: 100px; float: left; } .child { width: 200px; float: left; }<p>Ссылка на<a>CodePen</a>.</p>
70
<p>У каждого элемента есть условные два внутренних - :before- и :after-псевдоэлементы. Это очень мощный инструмент в вёрстке, позволяющий держать разметку чистой.</p>
70
<p>У каждого элемента есть условные два внутренних - :before- и :after-псевдоэлементы. Это очень мощный инструмент в вёрстке, позволяющий держать разметку чистой.</p>
71
<p>По сути дела, разметка теперь выглядит такой:</p>
71
<p>По сути дела, разметка теперь выглядит такой:</p>
72
&lt;div class="parent"&gt; &lt;div class="parent:before"&gt; &lt;/div&gt; &lt;div class="child"&gt; &lt;/div&gt; &lt;/div&gt;<p>Чтобы этот элемент отобразился, необходимо задать ему content. Подробнее про<a>псевдоэлементы</a>.</p>
72
&lt;div class="parent"&gt; &lt;div class="parent:before"&gt; &lt;/div&gt; &lt;div class="child"&gt; &lt;/div&gt; &lt;/div&gt;<p>Чтобы этот элемент отобразился, необходимо задать ему content. Подробнее про<a>псевдоэлементы</a>.</p>
73
<p><strong>Плюсы и минусы:</strong>- экономия разметки! - но это float. Сейчас уже почти полностью вытеснено flexbox-ами.</p>
73
<p><strong>Плюсы и минусы:</strong>- экономия разметки! - но это float. Сейчас уже почти полностью вытеснено flexbox-ами.</p>
74
<h2>Вариант #16 - псевдоэлементы + text-align</h2>
74
<h2>Вариант #16 - псевдоэлементы + text-align</h2>
75
<p>С учётом всего перечисленного этот вариант очевиден:</p>
75
<p>С учётом всего перечисленного этот вариант очевиден:</p>
76
.parent { width: 400px; /* text-align: left; */ font-size: 0; } .parent:before { content: ''; display: inline-block; width: 100px; } .child { display: inline-block; width: 200px; }<p>Ссылка на<a>CodePen</a>. И предлагаем читателям самостоятельно разобраться, почему здесь присутствует font-size: 0.</p>
76
.parent { width: 400px; /* text-align: left; */ font-size: 0; } .parent:before { content: ''; display: inline-block; width: 100px; } .child { display: inline-block; width: 200px; }<p>Ссылка на<a>CodePen</a>. И предлагаем читателям самостоятельно разобраться, почему здесь присутствует font-size: 0.</p>
77
<h2>Вариант #17 - flexbox</h2>
77
<h2>Вариант #17 - flexbox</h2>
78
.parent { width: 400px; display: flex; justify-content: center; } .child { width: 200px; }<p>Ссылка на<a>CodePen</a>Этот вариант предлагают опытные верстальщики.</p>
78
.parent { width: 400px; display: flex; justify-content: center; } .child { width: 200px; }<p>Ссылка на<a>CodePen</a>Этот вариант предлагают опытные верстальщики.</p>
79
<p>Про flexbox-ы написано масса статей. Для начинающих предлагаем ознакомиться вот с<a>этим</a>. Вариант с display: -webkit-box можно считать эквивалентным.</p>
79
<p>Про flexbox-ы написано масса статей. Для начинающих предлагаем ознакомиться вот с<a>этим</a>. Вариант с display: -webkit-box можно считать эквивалентным.</p>
80
<p><strong>Плюсы и минусы:</strong>- ничего не нужно задавать у внутреннего элемента; - ну и если есть другие элементы -одно удовольствие их выравнивать flex-ом; - конечно, сейчас это менее актуально, но помним про<a>поддержку</a>.</p>
80
<p><strong>Плюсы и минусы:</strong>- ничего не нужно задавать у внутреннего элемента; - ну и если есть другие элементы -одно удовольствие их выравнивать flex-ом; - конечно, сейчас это менее актуально, но помним про<a>поддержку</a>.</p>
81
<h2>Вариант #18 - flex-direction: column</h2>
81
<h2>Вариант #18 - flex-direction: column</h2>
82
<p>Как дополнение к предыдущему, раскрывает ваши возможности с flexbox-ами:</p>
82
<p>Как дополнение к предыдущему, раскрывает ваши возможности с flexbox-ами:</p>
83
.parent { width: 400px; display: flex; flex-direction: column; align-items: center; } .child { width: 200px; }<p>Ссылка на<a>CodePen</a>.</p>
83
.parent { width: 400px; display: flex; flex-direction: column; align-items: center; } .child { width: 200px; }<p>Ссылка на<a>CodePen</a>.</p>
84
<p><strong>Плюсы и минусы:</strong>- нужен, собственно, когда у Вас flex-direction: column.</p>
84
<p><strong>Плюсы и минусы:</strong>- нужен, собственно, когда у Вас flex-direction: column.</p>
85
<h2>Вариант #19 - flex + space-between</h2>
85
<h2>Вариант #19 - flex + space-between</h2>
86
<p>C flex-ами можно творить чудеса, например, очень ровно выровнять набор элементов.</p>
86
<p>C flex-ами можно творить чудеса, например, очень ровно выровнять набор элементов.</p>
87
.parent { width: 400px; display: flex; justify-content: space-between; } .parent:before, .parent:after { content: ''; } .child { width: 200px; }<p>Ссылка на<a>CodePen</a>. Можно считать, что варианты с space-around, margin: auto эквивалентны данному.</p>
87
.parent { width: 400px; display: flex; justify-content: space-between; } .parent:before, .parent:after { content: ''; } .child { width: 200px; }<p>Ссылка на<a>CodePen</a>. Можно считать, что варианты с space-around, margin: auto эквивалентны данному.</p>
88
<h2>Вариант #20 - CSS Grid</h2>
88
<h2>Вариант #20 - CSS Grid</h2>
89
<p>CSS grid - это современный и самый мощный, в то же время простой и гибкий инструмент для организации сеток и выравнивания.</p>
89
<p>CSS grid - это современный и самый мощный, в то же время простой и гибкий инструмент для организации сеток и выравнивания.</p>
90
.parent { width: 400px; display: grid; grid-template-columns: 1fr 200px 1fr; } .child { grid-column: 2 / 3 }<p>Ссылка на<a>CodePen</a>Здесь организуется сетка из трёх колонок (с автоматическим разбиением первой и последней). Сам .child располагается между 2-ой и третьей линий сетки (т. е. во второй колонке).</p>
90
.parent { width: 400px; display: grid; grid-template-columns: 1fr 200px 1fr; } .child { grid-column: 2 / 3 }<p>Ссылка на<a>CodePen</a>Здесь организуется сетка из трёх колонок (с автоматическим разбиением первой и последней). Сам .child располагается между 2-ой и третьей линий сетки (т. е. во второй колонке).</p>
91
<p>Это далеко не единственный способ выровнять внутренний див по центру с помощью CSS Grid.</p>
91
<p>Это далеко не единственный способ выровнять внутренний див по центру с помощью CSS Grid.</p>
92
<p>Рекомендуем читателям<a>ознакомиться</a>.</p>
92
<p>Рекомендуем читателям<a>ознакомиться</a>.</p>
93
<p><strong>Плюсы и минусы</strong>: - современно; - со временем станет менее актуально, но<a>всё же</a>.</p>
93
<p><strong>Плюсы и минусы</strong>: - современно; - со временем станет менее актуально, но<a>всё же</a>.</p>
94
<h2>Вариант #21 - JS</h2>
94
<h2>Вариант #21 - JS</h2>
95
<p>С помощью JS можно сделать то же самое. Это, безусловно считается моветоном, но знать про это нужно:</p>
95
<p>С помощью JS можно сделать то же самое. Это, безусловно считается моветоном, но знать про это нужно:</p>
96
const updateChildWidth = () =&gt; { const parent = getComputedStyle(document.getElementsByClassName('parent')[0]); const parentWidth = +parent.width.replace('px', ''); const margin = 100; const childWidth = parentWidth - 2 * margin; console.log(childWidth); const child = document.getElementsByClassName('child')[0]; child.style.width = `${childWidth}px`; child.style.marginLeft = `${margin}px`; } updateChildWidth(); window.onresize = updateChildWidth;<p>Ссылка на<a>CodePen</a>.</p>
96
const updateChildWidth = () =&gt; { const parent = getComputedStyle(document.getElementsByClassName('parent')[0]); const parentWidth = +parent.width.replace('px', ''); const margin = 100; const childWidth = parentWidth - 2 * margin; console.log(childWidth); const child = document.getElementsByClassName('child')[0]; child.style.width = `${childWidth}px`; child.style.marginLeft = `${margin}px`; } updateChildWidth(); window.onresize = updateChildWidth;<p>Ссылка на<a>CodePen</a>.</p>
97
<p>Да, обратите внимание на последнюю строчку. Вычислить один раз размер div недостаточно. Некоторая категория пользователей (к которым и относится автор) изменяет размер окна после открытия. Поэтому обновление размеров - тоже немаловажная часть.</p>
97
<p>Да, обратите внимание на последнюю строчку. Вычислить один раз размер div недостаточно. Некоторая категория пользователей (к которым и относится автор) изменяет размер окна после открытия. Поэтому обновление размеров - тоже немаловажная часть.</p>
98
<p><strong>Плюсы и минусы:</strong>- делать с помощью JS то, что можно сделать с помощью CSS - это моветон; - может быть полезно в совсем сложных случаях.</p>
98
<p><strong>Плюсы и минусы:</strong>- делать с помощью JS то, что можно сделать с помощью CSS - это моветон; - может быть полезно в совсем сложных случаях.</p>
99
<p>В принципе и всё. Надеюсь, подобный перечень способов натолкнёт на более подробное изучение некоторых возможностей CSS.</p>
99
<p>В принципе и всё. Надеюсь, подобный перечень способов натолкнёт на более подробное изучение некоторых возможностей CSS.</p>
100
<p>Если есть какие-то добавления - ждём ваших комментариев!</p>
100
<p>Если есть какие-то добавления - ждём ваших комментариев!</p>
101
101