Москва, Строительный проезд, 7А кор. 4 Работаем: 24/7 +7 495 744 67 74

CSS: Как расположить по центру?

В предыдущем материале, речь шла о позиционировании объекта. Здесь же подробнее остановимся на том, как можно с помощью различных правил CSS разместить определенный элемент по центру страницы, некоторого блока.
Прежде чем перейти к рассмотрению примеров вспомним, что самым простым способом центрирования является запись — text-align: center. Но это относится непосредственно к тексту, ибо такая комбинация (text-align: center) сулит выравнивание некоторого текста по центру и к тому же, он размещается по центру горизонтали окна Вашего браузера или некого контейнера, где расположен текстовый блок.

Если и Вы так считаете, то я себе позволю с Вами не согласится потому, что правило — text-align: center можно применить не только к тексту, но и к рисунку. Как?
Прежде чем приступить к примерам, хочу сказать, что все представленные варианты центрирования будут производится к такому html–коду:

<div class="center">
<img src="css.jpg" alt="">
</div>

Центрирование с помощью text-align

Не могу не согласится с тем, что самое простое решение является самым лучшим и самым приемлемым вариантом. Как говорится, зачем изобретать новый велосипед?
Чтобы выровнять рисунок по центру с помощью text-align необходимо задать свойства

div.center { text-align: center; }
div.center img { width: 33%; height: auto; }

Но для этого варианта необходимо помнить, что такое решение подразумевает только расположение по горизонтали и никак не по вертикали. Чтобы выровнять еще и по вертикали, необходимо будет для блока div-а указать отступы сверху, снизу — margin-top и margin-bottom

margin: auto

Напомним, что свойство margin устанавливает определенный отступ от каждой границы объекта и если это свойство равно значению – auto, то это говорит нам о том, что величина всех этих отступов будет автоматически рассчитана браузером.
Автоматически рассчитана – это означает, что отступ слева, справа будет одинаковым и если еще указать высоту нашего блока (в этом случаи центрирования – это обязательно) то в результате получим золотую средину

div.center { background: none; }
div.center img { display: block; width: 33%; height: auto; margin: 0 auto; } 

Центровка с помощью table-cell

В отличии от предыдущего способа, используя display: table-cell можно выполнить центрирование как по вертикали, так и по горизонтали. Прежде чем перейти к особенности такого выравнивания скажу, несколько фраз о display: table.
Выражение display: table говорит о том, что некий элемент будет выступать блочной таблицей (подобно использованию тега <table>), но без самой таблицы, а.сочетание table-cell будет эмулировать саму ячейку таблицы.
Чтобы выровнять посредине (по вертикали, горизонтали) с помощью table-cell необходимо нашу подопытную картинку (css.jpg) поместить еще в один блок.

<div class="center-aligned">
<div class="center-core">
<img src="css.jpg">
</div>
</div>

И теперь свойства CSS

.center-aligned { display: table; background: none; width: 100%; }
.center-core { display: table-cell; text-align: center; vertical-align: middle; }
.center-core img { width: 33%; height: auto; }

Если Вы заметили, то для класса center-aligned указана ширина (width: 100%) – это для перестраховки, корректной работы нашего варианта центрирования.

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

Ранее, на страницах Блога мы уже рассматривали варианты позиционирование с помощью position: absolute | fixed | relative. Оказывается, если внешнему блоку указать высоту, то это позволит расположить объект посредине

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

translate

Центрирование с помощью translate – это имеется ввиду трансформация, перемещение нашего объекта влево, вправо или вверх, низ, которое задается с помощью выражения transform: translate(x,y). Как Вы наверное догадались, x,y – это координаты месторасположения объекта. Так, к примеру, если необходимо переместить на 100 единиц вправо, то необходимо указать – х=100, y=0. Влево — х=-100, y=0. Точно также при перемещении вверх, вниз. Только необходимо вспомнить, что положительные значения координаты Y-ка находятся внизу, отрицательные – верхней части экрана.

И так, чтобы расположить объект по средине необходимо

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

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

Центровка с помощью flex

Расположение объекта с помощью flex пожалуй является самым простым вариантом, который работает практически во всех современных браузерах (к IE это не относится, но можно подстраховаться строкой display: table-cell).
Чтобы осуществить такое выравнивание необходимо записать

.center { background: none; display: flex; justify-content: center; align-items: center; }
.center img { width: 30%; height: auto; }

Но а полная версия CSS-кода будет такой:

.center { background: none;
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;
}

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


адрес

г. Москва, Строительный пр., 7Ак4

телефон

+7 495 744 67 74Круглосуточно
Яндекс.Метрика

Если у Вас есть вопросы, жалобы или предложения по работе нашей компании, напишите нам Нам важно любое мнение. Спасибо.