Как поставить контейнер по центру в css

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

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

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

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

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

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

margin: auto

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

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

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

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

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

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

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

translate

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *