Семь методов центрирования с помощью CSS

Дата публикации: 2013-10-25

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

Центрирование элементов на странице по горизонтали, похоже, самое легкое, тогда как выполнить выравнивание по вертикали сложнее, а самое сложное – сочетание этих двух задач. При адаптивном дизайне мы редко знаем точную высоту или ширину элементов, что исключает множество возможностей. Как я подсчитал, нам остается по меньшей мере шесть методик центрирования в CSS. Я начну с самой простой и лучше всего поддерживаемой и перейду к самой сложной, работая над одним основным кодом:

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

</div>

Изображения обуви будут различаться, но всегда останутся исходного размера в 500px × 500px. Цвета модели HSL («тон-насыщенность-яркость» применены к фонам для поддержания устойчивой цветовой темы.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Горизонтальное центрирование с помощью text-alignment

Иногда самым лучшим остается очевидное решение:

div.center { text-align: center; background: hsl(0, 100%, 97%); }
div.center img { width: 33%; height: auto; }

1 2	div.center { text-align: center; background: hsl(0, 100%, 97%); } div.center img { width: 33%; height: auto; }

Оно не выравнивает изображение по вертикали: чтобы его добиться, вам понадобилось бы добавить padding к div или margin-top и margin-bottom к его содержимому, оставляя возможность контейнеру получить высоту от собственного контента.

Центрирование с помощью margin: auto

И снова главным образом для горизонтального центрирования, и с теми же ограничениями, что у вышеприведенного метода с text-alignment:

div.center { background: hsl(60, 100%, 97%); }
div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }

1 2	div.center { background: hsl(60, 100%, 97%); } div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }

Обратите внимание на display: block, в данном случае оно необходимо для того, чтобы изображение приняло margin: 0 auto.

Центрирование с table-cell

Применяется display: table-cell, а не настоящая разметка таблицы; позволяет как горизонтальное, так и вертикальное центрирование. Обычно требует добавления и манипулирования второго, внешнего элемента, который может быть чем угодно – от div до самого body.

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

</div>

CSS:

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

.center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; }

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

.center-core img { width: 33%; height: auto; }

Заметьте, что width: 100% нужно для того, чтобы предотвратить свертывание div, и что внешнему контейнеру для вертикального центрирования содержимого потребуется некоторая высота. Попытка отцентрировать элемент по вертикали в body, кроме того, вовлечет стандартный прием – установку высоты html и body. Работает во всех браузерах, включая IE8+.

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

Недавно представленная Стивеном Шоу (Stephen Shaw) методика хорошо поддерживается браузерами. Единственный недостаток ее в том, что для внешнего контейнера должен быть объявлен height в некоей форме:

.absolute-aligned {
position: relative; min-height: 500px;
background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
width: 50%;
min-width: 200px;
height: auto;
overflow: auto; margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

.absolute-aligned {

position: relative; min-height: 500px;

background: hsl(200, 100%, 97%);

}

.absolute-aligned img {

width: 50%;

min-width: 200px;

height: auto;

overflow: auto; margin: auto;

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

}

Стивен продемонстрировал множество вариантов этого кода, описывая этот метод в своей статье в Smashing Magazine.

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

Новая методика Криса Койера (Chris Coiyer), использующая преобразования CSS. Также поддерживает горизонтальное и вертикальное центрирование:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; }
.center img { position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); width: 30%; height: auto; }

.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; }

.center img { position: absolute; top: 50%; left: 50%;

transform: translate(-50%, -50%); width: 30%; height: auto; }

Имеет несколько недостатков:

Коду преобразований CSS для работы во всех браузерах потребуются вендорные префиксы

Не работает в старых версиях IE (версии 8 и ранее)

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

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

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

Возможно, станет самым простым решением центрирования после исчезновения вариантов свойств и вендорных префиксов.

.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; }
.center img { width: 30%; height: auto; }

1 2	.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; } .center img { width: 30%; height: auto; }

Во многих отношениях самое простое решение, но сдерживаемое множеством старых синтаксисов и недостатком поддержки в более старых версиях IE (хотя display: table-cell сойдет за приемлемое альтернативное решение). Полный CSS:

.center { background: hsl(240, 100%, 97%);
display: -webkit-box; /* СТАРЫЕ: Safari, iOS 6 и ранее; браузер Android, старый WebKit */
display: -moz-box; /* СТАРЫЙ: Firefox (может быть с ошибками) */
display: -ms-flexbox; /* СТАРЫЙ: IE 10 */
display: -webkit-flex; /* ОКОНЧАТЕЛЬНЫЙ С ПРЕФИКСАМИ Chrome 21+ */
display: flex; /* ОКОНЧАТЕЛЬНЫЙ: Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

.center { background: hsl(240, 100%, 97%);

display: -webkit-box; /* СТАРЫЕ: Safari, iOS 6 и ранее; браузер Android, старый WebKit */

display: -moz-box; /* СТАРЫЙ: Firefox (может быть с ошибками) */

display: -ms-flexbox; /* СТАРЫЙ: IE 10 */

display: -webkit-flex; /* ОКОНЧАТЕЛЬНЫЙ С ПРЕФИКСАМИ Chrome 21+ */

display: flex; /* ОКОНЧАТЕЛЬНЫЙ: Opera 12.1+, Firefox 22+ */

-webkit-box-align: center;

-moz-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

-webkit-box-pack: center;

-moz-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

}

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

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

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

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

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

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

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

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

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

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

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

И снова, я буду обсуждать calc в будущей статье. У этой техники почти те же потенциальные недостатки, что у flexbox: тогда как у нее хорошая поддержка в Firefox, начиная с версии 4, в более ранних браузерных версиях ей требуются вендорные префиксы, и совсем отсутствует поддержка в IE 8. Полный код изображения будет такой:

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

.center img { width: 40%; height: auto; position: absolute;

top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%);

top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%);

top: calc(50% - 20%); left: calc(50% - 20%); }

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

Автор: Dudley Storey

Источник: http://demosthenes.info/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее