css изображение по центру

CSS: Картинка по центру

Самый простой способ поставить картинку по центру – флекс. Работает одинаково хорошо со всеми тегами: див, спан или чекбокс, не важно.

Самый простой способ поставить картинку по центру — флекс.

В примере изображения, но вместо них может быть див, спан или чекбокс. Работает одинаково для всех элементов.

Картинка по центру

css изображение по центру

Фотограф: Hans Pollner

За основу возьмём горизонтальное изображение и разместим его внутри квадратного блока. Для блока-родителя пропишем следующие стили:

.content-centering{
    display:flex;
    justify-content: center; /*центрируем элемент по горизонтали */
    align-items: center; /* и вертикали */
    width: 200px; /* задали размеры блоку-родителю */
    height: 200px;
    overflow: hidden; /* если элемент больше блока-родителя – обрезаем лишнее */
}

Картинка становится по центру блока, внутри которого находится. Если она больше блока-родителя, края обрезаются.

Вся картинка в пределах блока-родителя

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

.content-centering_element{
    max-width: 100%;
}

Способ работает, пока у нас горизонтальное изображение. Добавим вертикальное. Такое изображение выходит за края блока и обрезается.

Чтобы исправить положение, допишем ограничение по высоте:

.content-centering_element{
    max-width: 100%;
    max-height: 100%;
}

Картинка в пределах блока-родителя, а лишнее отсекается

На предыдущем этапе вертикальная картинка вписалась удачнее: она заняла всю ширину блока, а по высоте обрезалась.

Сделаем так и для горизонтального изображения. Понадобится два класса:

.element_horizont{ /* для горизонтальных изображений */
    max-height:100%;
}
.element_vertical{ /* и для вертикальных */
  max-width:100%; 
}

Чтобы не прописывать классы вручную, добавим скрипт. Он определяет большую сторону картинки и добавляет ей соотвествующий класс.