Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>21 мар 2023</li>

3 <li>0</li>

4 </ul>Как расположить что угодно по центру чего угодно с помощью каскадных таблиц стилей.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.

7 CSS существует и развивается с 1996 года. За четверть века и три редакции в этом языке появилось много разных способов отцентрировать элемент - как костыльных, так и каноничных.

8 В статье мы расскажем об основных приёмах для выравнивания по центру в CSS. Какой из них более удобен и приятен - решать вам.

9 <ul><li><a>Горизонтальное центрирование</a></li>

10 </ul><ul><li><a>С помощью Flexbox</a></li>

11 <li><a>Через автоотступы</a></li>

12 <li><a>С помощью inline-блоков</a></li>

13 <li><a>Выравнивание нескольких элементов</a></li>

14 </ul><ul><li><a>Вертикальное центрирование</a></li>

15 </ul><ul><li><a>С помощью Flexbox</a></li>

16 <li><a>С помощью свойств position и transform</a></li>

17 <li><a>Ячейки таблицы</a></li>

18 </ul><ul><li><a>Выравнивание по центру</a></li>

19 </ul><ul><li><a>С помощью Flexbox</a></li>

20 <li><a>С помощью свойств position и transform</a></li>

21 <li><a>Через CSS Grid</a></li>

22 </ul><ul><li><a>Центрирование на примерах</a></li>

23 </ul><ul><li><a>Центрирование текста по горизонтали</a></li>

24 <li><a>Центрирование текста по вертикали</a></li>

25 <li><a>Как выровнять заголовок, список или форму</a></li>

26 <li><a>Как центрировать блок</a></li>

27 <li><a>Как разместить блок посередине страницы</a></li>

28 <li><a>Выравнивание картинок и кнопок по центру</a></li>

29 </ul><ul><li><a>Резюмируем</a></li>

30 </ul>Как работают способы из этого раздела, мы покажем на примере блоков div, однако применять их можно и к другим элементам: заголовкам, абзацам, изображениям, кнопкам, формам, спискам и так далее.

31 Для наглядности мы добавим границы блоков: синие для родительских и чёрные для дочерних.

32 Добавьте в родительский элемент свойства display: flex, чтобы сделать элемент flex-контейнером, и justify-content: center, чтобы контент внутри контейнера расположился посередине горизонтальной оси. Обратите внимание: justify-content действует только на flex-элементы, поэтому без display: flex он не заработает.

33 HTML:

34 <div class="parent"> <div class="child">Блок с текстом</div> </div>CSS:

35 .parent { display: flex; justify-content: center; border: 2px solid blue; } .child { border: 2px solid black; }Результат:

36 Изображение: Skillbox MediaПреимущество такого метода в том, что дочерний блок будет автоматически подстраиваться под размеры содержимого. Если же нужно задать размеры явно, то сделать это можно с помощью width для ширины, и height для высоты.

37 Добавьте свойства margin-left: auto и margin-right: auto - они устанавливают автоматические отступы слева и справа. И укажите ширину с помощью width:

38 CSS:

39 .block { width: 70px; margin-left: auto; margin-right: auto; border: 2px solid black; }HTML:

40 <div class="block">Блок с текстом</div>Результат:

41 Изображение: Skillbox MediaПреимущество метода состоит в том, что не нужно явно прописывать свойства родительского элемента (в нашем случае этоbody).

42 Две строки с автоотступами можно заменить на одну: margin: 0 auto или margin: auto. В обоих случаях результат будет одинаковым.

43 Проще всего выравнивать текст по горизонтали. Для этого существует свойство text-align: center, которое применяется к родительскому элементу.

44 CSS:

45 .parent { text-align: center; border: 2px solid blue; }HTML:

46 <div class="parent">Текст</div>Результат:

47 Изображение: Skillbox MediaНесмотря на своё название, text-align можно применять не только к тексту. Для этого нужно сделать элементы, которые хотите выровнять, встроенными - с помощью display: inline-block.

48 CSS:

49 .parent { text-align: center; border: 2px solid blue; } .child { display: inline-block; border: 2px solid black; }HTML:

50 <div class="parent"> <div class="child">Блок с текстом</div> </div>Результат:

51 Изображение: Skillbox MediaВ этом методе так же, как и в первом, размеры блока подстраиваются под содержимое. Но при желании можно явно задать ширину и высоту.

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

53 <div class="parent"> <div class="child">Блок с текстом</div> <div class="child">Блок с текстом в две строки</div> <div class="child">Блок с текстом в три строки</div> </div>Flex-элементывыстраиваются в один ряд и приобретают одинаковую высоту:

54 .parent { display: flex; justify-content: center; border: 2px solid blue; } .child { border: 2px solid black; }Изображение: Skillbox MediaС автоотступамикаждый блочный элемент помещается в отдельную строку:

55 .block { width: 120px; margin: auto; border: 2px solid black; }Изображение: Skillbox MediaИнлайн-блокиостаются в одном ряду, но у них будет разная высота (у каждого - по размеру контента). Плюс текст в них автоматически выравнивается по центру.

56 .parent { text-align: center; border: 2px solid blue; } .child { display: inline-block; border: 2px solid black; }Изображение: Skillbox MediaПри горизонтальном центрировании легко определить ширину родительского элемента: если она не задана явно, то обычно равна ширине экрана. При вертикальном центрировании всё немного сложнее: высоту родительского элемента приходится задавать явно с помощью свойства height.

57 Как и в прошлом разделе, мы будем показывать работу всех методов на примере блоков div и добавим те же границы: синие - для родительских и чёрные - для дочерних элементов. Во всех примерах будем использовать один и тот же HTML-код:

58 <div class="parent"> <div class="child">Блок с текстом</div> </div>Добавьте в родительский элемент свойства display: flex (превращает элемент во flex-контейнер) и align-items: center. Второе свойство отцентрирует весь контент внутри контейнера по вертикали.

59 .parent { height: 100px; display: flex; align-items: center; border: 2px solid blue; } .child { border: 2px solid black; }Изображение: Skillbox MediaЭтот способ использует сразу много свойств для разных целей, поэтому разберём его по шагам.

60 Родительскому элементу нужно присвоить свойство position: relative, а дочернему - position: absolute. Благодаря этому мы сможем сдвинуть дочерний блок относительно верхнего края родительского, используя свойство top: 50%.

61 .parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; border: 2px solid black; }Изображение: Skillbox MediaОбратите внимание, что сейчас по центру расположена не середина блока с текстом, а его верхняя граница. Чтобы исправить это, дочерний элемент нужно сдвинуть на половину его высоты вверх. Делается это свойством transform: translate (0, -50%). Первое число означает смещение по горизонтали, второе - по вертикали.

62 .parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; transform: translate(0, -50%); border: 2px solid black; }В результате получается так:

63 Изображение: Skillbox MediaЕсли по какой-то причине вы не хотите использовать свойство transform, вместо него можно поставить margin. Но для этого необходимо знать размер дочернего элемента и установить отрицательный margin-top, равный половине его высоты.

64 Добавьте в родительский элемент display: table-cell, чтобы блок вёл себя как ячейка таблицы, и vertical-align: middle - это свойство центрирует содержимое блока по вертикали.

65 .parent { height: 100px; display: table-cell; vertical-align: middle; border: 2px solid blue; } .child { border: 2px solid black; }Изображение: Skillbox MediaЭто довольно костыльный и не очень удобный способ. Так как ячейка находится вне таблицы, мы не можем корректно управлять её шириной. Для этого нужно создать родительский элемент со свойством display: table и задавать width уже внутри него.

66 Чтобы поместить элемент по центру родительского блока (то есть выровнять одновременно по горизонтали и вертикали), иногда достаточно объединить под одним селектором методы горизонтального и вертикального центрирования.

67 Во всех примерах мы будем использовать один и тот же HTML-код и получать один и тот же результат.

68 <div class="parent"> <div class="child">Блок с текстом</div> </div>Изображение: Skillbox MediaЧтобы центрировать элемент с помощью Flexbox, достаточно объединить горизонтальный и вертикальный способы:

69 .parent { height: 100px; display: flex; justify-content: center; align-items: center; border: 2px solid blue; } .child { border: 2px solid black; }В этом случае нужно сделать всё то же, что и при вертикальным центрировании, но с двумя изменениями в стилях дочернего элемента:

70 <ul><li>добавить свойство left: 50%;</li>

71 <li>установить свойству transform значение translate (-50%, -50%).</li>

72 </ul>.parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid black; }Этот способ похож на вёрстку флексами. Нужно установить в родительском элементе свойство display: grid - оно превратит его в grid-контейнер. А в дочернем задать автоматические отступы с помощью margin: auto.

73 .parent { height: 100px; display: grid; border: 2px solid blue; } .child { margin: auto; border: 2px solid black; }Теперь рассмотрим частные случаи, как отцентрировать текст, заголовок, список, форму, блок, изображение и кнопку.

74 Самый простой способ выровнять текст по горизонтали - использовать свойство text-align: center.

75 HTML:

76 Абзац текста, горизонтально выровненный по центруCSS:

77 .center-text { text-align: center; }Результат:

78 Изображение: Skillbox MediaЕсли добавить в абзаце автоматические отступы, то у текста как будто появятся границы, за которые он не будет выходить.

79 HTML:

80 Абзац текста, выровненный по центру, ограниченный справа и слеваCSS:

81 .center-text { width: 100px; margin: auto; text-align: center; }Результат:

82 Изображение: Skillbox MediaПри желании также можно использовать флексбоксы, но это менее удобно, потому что в таком случае придётся явно задавать родительский элемент.

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

84 Flexbox.В этом случае нужно задать стили только для родительского элемента, а для дочернего CSS-кода можно не писать.

85 HTML:

86 <main class="parent"> Абзац с текстом, вертикально выровненный по центру </main>CSS:

87 .parent { height: 100px; display: flex; align-items: center; border: 2px solid blue; }Результат:

88 Изображение: Skillbox MediaПозиционирование.Если применить к элементу свойства position и transform, позиционирование будет работать некорректно из-за того, что по умолчанию у него есть отступы. Решить это можно двумя путями.

89 Первый (рекомендуемый) - убрать из абзаца отступ свойством margin: 0.

90 HTML:

91 <main class="parent"> Абзац с текстом, вертикально выровненный по центру </main>CSS:

92 .parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; transform: translate(0, -50%); margin: 0; }Второй - применить стиль дочернего элемента к тегу внутри .

93 HTML:

94 <main class="parent"> Абзац с текстом, вертикально выровненный по центру </main>CSS:

95 .parent { height: 100px; position: relative; border: 2px solid blue; } .child { position: absolute; top: 50%; transform: translate(0, -50%);При обоих путях результат будет один и тот же:

96 Изображение: Skillbox MediaЯчейки таблицы.Здесь так же, как и в случае с флексбоксами, нужно задать стиль только для родительского элемента.

97 HTML:

98 <main class="parent"> Абзац с текстом, вертикально выровненный по центру </main>CSS:

99 .parent { height: 100px; display: table-cell; vertical-align: middle; border: 2px solid blue; }Результат:

100 Изображение: Skillbox MediaК заголовкам, спискам и формам применяются все те же способы позиционирования по центру, что и к обычному тексту: как по горизонтали, так и по вертикали.

101 Единственная особенность списков - их родителю не стоит присваивать свойство text-align: center. Выглядеть это будет плохо, можете убедиться в этом на следующем примере.

102 HTML:

103 <div class="parent"> <ul> <li>Первый пункт</li> <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> </ul> <li>Второй пункт</li> </ul> </div>CSS:

104 .parent { text-align: center; border: 2px solid blue; }Результат:

105 Изображение: Skillbox MediaКогда мы рассказывали о способах выравнивания элементов, приводили примеры именно на блоках. Поэтому, если вы ищете ответ на этот вопрос, перейдите в один из предыдущих разделов:

106 <ul><li><a>Горизонтальное центрирование</a></li>

107 <li><a>Вертикальное центрирование</a></li>

108 <li><a>Выравнивание по центру</a></li>

109 </ul>Чтобы поставить блок в центре веб-страницы, можно использовать любой из <a>перечисленных выше способов</a>. Однако будет два различия:

110 <ul><li>в качестве родительского элемента выступает всё тело веб-страницы (элемент <body>);</li>

111 <li>необязательно явно указывать высоту блока.</li>

112 </ul>Во всех примерах результат будет одинаковым. Как и раньше, голубую и чёрную рамку используем для наглядности.

113 Изображение: Skillbox MediaFlexbox.Недостаток этого подхода в том, что такая страница будет выравнивать по центру все элементы внутри себя, а не только те, которые нам нужны.

114 HTML:

115 <body> <div>Блок посередине</div> </body>CSS:

116 body { display: flex; align-items: center; justify-content: center; border: 2px solid blue; }Позиционирование.Дополнительное отличие от <a>описанного выше способа</a>в том, что не нужно указывать свойство position: relative - ведь расположение <body> не зависит ни от каких других элементов.

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

118 HTML:

119 <body> <div class="block">Блок посередине</div> </body>CSS:

120 body { border: 2px solid blue; } .block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid black; }Grid.Здесь мы задаём свойства как родительскому, так и дочернему элементу.

121 HTML:

122 <body> <div class="block">Блок посередине</div> </body>CSS:

123 body { display: grid; border: 2px solid blue; } .block { margin: auto; border: 2px solid black; }Центрирование изображений <img> и кнопок <button> в CSS работает почти так же, как и с блоками. В большинстве случаев вы можете просто использовать те же методы, о которых мы рассказывали ранее:

124 <ul><li>для<a>горизонтального центрирования</a> (кроме автоотступов);</li>

125 <li>для<a>вертикального центрирования</a>(кроме некоторых случаев во флексбоксах);</li>

126 <li>для<a>выравнивания посередине</a>(кроме некоторых случаев во флексбоксах).</li>

127 </ul>Если вы выравниваете картинку или кнопку по горизонтали с помощью<a>автоотступов</a>, добавьте ей свойство display: block, чтобы она вела себя как блок.

128 HTML:

129 <img src="https://skillbox.ru/local/templates/media/images/common/menu-icon-3.svg">CSS:

130 <img src="https://skillbox.ru/local/templates/media/images/commonimg { height:150px; display: block; margin: auto; }/menu-icon-3.svg">Результат:

131 Изображение: Skillbox MediaПри выравнивании с помощью<a>Flexbox</a>изображения или кнопки могут вести себя необычно. Вот в каких случаях это происходит:

132 <ul><li>задана высота родительского блока;</li>

133 <li>не заданы размеры картинки;</li>

134 <li>не указано свойство align-items.</li>

135 </ul>При выполнении всех трёх условий изображение или кнопка растянутся, чтобы занять всё пространство родительского элемента - от верхней границы до нижней.

136 CSS:

137 .parent { height: 300px; display: flex; justify-content: center; border: 2px solid blue; }HTML:

138 <div class="parent"> <img src="https://skillbox.ru/local/templates/media/images/common/menu-icon-3.svg"> </div>Результат:

139 Стандартный размер этого изображения - 17 на 24 пикселя. Но здесь оно автоматически растянулосьИзображение: Skillbox MediaВ остальных случаях флексбоксы будут работать так же, как и с блочными элементами.

140 Основная сложность при выравнивании элементов веб-страницы по центру - обилие подходов, у каждого из которых свои тонкости и ограничения:

141 <ul><li>Flexbox удобен для любого вида выравнивания. При таком подходе необходимо задавать стили только родительскому элементу.</li>

142 <li>Позиционирование можно использовать для выравнивания по вертикали и размещения элемента по центру блока (выравнивания по вертикали и горизонтали одновременно).</li>

143 <li>Автоотступы и inline-блоки удобно использовать для горизонтального выравнивания, ячейки таблицы - для вертикального, Grid - для размещения элемента по центру родительского блока.</li>

144 </ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>