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

18.02.2024

285

10 мин.

Содержание скрыть

1 Как центрировать изображение по горизонтали
2 Как поставить картинку по центру в CSS: по вертикали
1. 2.1 Display Flex
2. 2.2 Как поставить картинку по центру в CSS ручным способом
3 Как поставить картинку по центру в CSS одновременно по оси X и Y
4 Кроссбраузерность

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

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

Как центрировать изображение по горизонтали

Использование CSS для центрирования изображения по горизонтали касается его размещения по оси X.

При помощи margin

Использование этого свойства приведёт к выравниванию изображения справа и слева, если его ширина меньше 100%.

<img src="https://smart-frontend.ru/wp-content/uploads/2024/02/otfiltrovat-massiv-v-js.jpg">

img {
    display: block;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
}

display: block (изменяет элемент изображение на блочный);
width: 250px (задаёт ширину изображения меньше 100%; можно использовать % вместо px, чтобы повысить адаптивность);
margin-left: auto и margin-right: auto (эти два свойства центрируют изображения по горизонтали).

Вместо использования margin-left: auto и margin-right: auto в качестве альтернативы можно использовать сокращение margin: auto. Однако в этом случае оно срабатывает для всех направлений, в том числе margin-top и margin-bottom. Это может вызвать проблемы в вёрстке, если используются определённые значения полей в верхней и нижней части изображения.

img {
    display: block;
    width: 250px;
    margin: auto;
}

Display Flex

Это отличный метод горизонтального центрирования изображения. Для этого метода понадобится обернуть его в div.

<div>
  <img src="https://smart-frontend.ru/wp-content/uploads/2024/02/otfiltrovat-massiv-v-js.jpg">
</div>

div {
    display: flex;
    justify-content: center;
}

img {
    width: 250px;
}

<div> (контейнер (он же div-оболочка), содержащий изображение, которое требуется центрировать);

display: flex (применение flexbox к оболочке div);
justify-content: center (центрирует дочерние flex-элементы по горизонтали при условии, что свойство flex-direction оставлено по умолчанию);
width: 250px (задаёт ширину изображения меньше 100%; можно использовать значение % вместо px, чтобы улучшить адаптивность).

Text Align

Изображения по умолчанию являются инлайновыми элементами, когда имеют блочную обёртку. Можно использовать свойство text-align по отношению к обёртке, чтобы выровнять изображение по горизонтали.

<div>
  <img src="https://smart-frontend.ru/wp-content/uploads/2024/02/otfiltrovat-massiv-v-js.jpg">
</div>

div {
    display: block;
    text-align: center;
}

img {
    width: 250px;
}

<div> (контейнер или div-оболочка, содержащая изображение, которое нужно отцентрировать);
display: block (гарантирует, что div-оболочка является блочным элементом, чтобы срабатывало выравнивание изображения по горизонтали; по умолчанию div является блочным элементом, поэтому в данном контексте это свойство выглядит лишним, но используемый в качестве оболочки элемент, может не являться блочным по умолчанию);
text-align: center (применённый к блочному элементу-оболочке, он центрирует изображения, которое он содержит);
width: 250px (задаёт изображению ширину меньше 100%; можно использовать значение % вместо px, чтобы улучшить адаптивность).

Как поставить картинку по центру в CSS ручным способом

Этот метод представляет собой ручной способ центрирования изображения по горизонтали. Он более сложный, чем другие способы, описанные в этом руководстве, но не менее эффективен.

<div>
  <img src="https://smart-frontend.ru/wp-content/uploads/2024/02/otfiltrovat-massiv-v-js.jpg">
</div>

div {
    position: relative;
}

img {
    position: absolute;
    left: calc(50% - 125px);
    width: 250px;
}

<div> (контейнер или div-оболочка, содержащая изображение, которое надо центрировать);
position: relative (выравнивает изображение по отношению к контейнеру div);
position: absolute (позволяет точно указать, где будет располагаться изображение);
left: calc(50% — 125px) (центрирует изображение по горизонтали).

Существует и альтернативный метод, который заменяет функцию calc свойством transform + функцией translate. Этот метод, возможно, лучше с точки зрения отзывчивости, поскольку в этом случае не нужно знать ширину изображения. Он позволяет динамически изменять размер картинки по мере необходимости без дополнительных медиазапросов в CSS.

Различия между предыдущим примером и этой альтернативной версией заключаются в свойствах top, transform и width и отсутствием height.

left: 50% (перемещает левую часть изображения в положение, выровненное по горизонтали);
transform: translateX(-50%) (перемещает изображение влево на 50% от его высоты, так что центр изображения становится по центру по горизонтали);
width: 25% (мы установим ширину равную 25% вместо явного указания высоты и ширины, так как она может изменяться по мере необходимости и горизонтальное центрирование изображения будет срабатывать всегда).

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

Использование CSS для центрирования изображения по вертикали означает его расположение по центру по оси Y. Для этого существует меньше методов, чем при размещении по горизонтали. К счастью, более современные методы, такие как flexbox и grid, упрощают эту задачу.

Display Flex

Понадобится div-оболочка для изображения. Необходимо также задать обёртке высоту, которая больше высоты изображения, чтобы вертикально центрировать его внутри контейнера.

<div>
  <img src="https://smart-frontend.ru/wp-content/uploads/2024/02/otfiltrovat-massiv-v-js.jpg">
</div>

div {
    display: flex;
    align-items: center;
    height: 500px;
}

img {
    width: 250px;
}

<div> (контейнер или div-обёртка, содержащая изображение, которое нужно центрировать;
display: flex (устанавливает для div-оболочки значение flexbox, чтобы выровнять элементы по центру; центрирует flex-элементы по вертикали при условии, что свойство flex-direction оставлено по умолчанию;
height: 500px (оболочка должна быть выше изображения, которое мы центрируем, чтобы картинка располагалась по центру внутри неё).

Как поставить картинку по центру в CSS ручным способом

Этот метод представляет собой ручной способ центрирования изображения по вертикали. Он более сложный, чем другие методы, описанные, но также является адаптивным.

<div>
  <img src="https://smart-frontend.ru/wp-content/uploads/2024/02/otfiltrovat-massiv-v-js.jpg">
</div>

div {
    position: relative;
   height: 500px;
}

img {
    position: absolute;
    top: calc(50% - 37.5px);
    height: 75px;
}

<div> (контейнер (он же div-обёртка), содержащая изображение;
position: relative (выравнивает изображение по отношению к обёртке);
height: 500px (устанавливает высоту для обёртки, которая больше высоты изображения);
position: absolute (позволяет точно установить, где будет располагаться изображение);
top: calc(50% — 37,5px) (устанавливает положение изображения по вертикали по центру).

Альтернативный метод заменяет функцию calc в предыдущем методе, замещая её свойством transform + функцией translate. Этот метод, возможно, лучше с точки зрения отзывчивости, поскольку нет необходимости знать высоту изображения. Это позволяет динамически изменять размер картинки по мере необходимости без дополнительных медиазапросов в CSS.

div {
    position: relative;
    height: 500px;
    background-color: red;
}

img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25%;
}

Различия между предыдущим примером CSS и этой альтернативной версией заключаются в свойствах top, transform и width (мы удалили свойство height).

top: 50% (перемещает верхнюю часть изображения вниз в положение, выровненное по вертикали);
transform: translateY(-50%) (это перемещает изображение вверх на 50% от его высоты так, чтобы центр изображения совпадал с положением по вертикали);
width: 25% (устанавливаем ширину равной 25%, вместо указания высоты и ширины для автоматического изменения по мере необходимости).

Как поставить картинку по центру в CSS одновременно по оси X и Y

Центрирование изображения по вертикали и горизонтали означает его расположение по центру как по оси X, так и Y.

CSS Grid

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

<div>
  <img src="https://smart-frontend.ru/wp-content/uploads/2024/02/otfiltrovat-massiv-v-js.jpg">
</div>

div {
    display: grid;
    place-items: center;
   height: 500px; 
}

img {
    width: 250px;
}

<div> (контейнер (он же div-обёртка), содержащая изображение;
display: grid (применяет макет сетки к обёртке);
place-items: center (центрирует изображение по вертикали и горизонтали);
height: 500px (устанавливает высоту для обёртки, которая больше высоты изображения);
width: 250px (придаёт изображению ширину менее 100%; можно использовать % вместо px, чтобы улучшить адаптивность).

Display Flex

Использование flexbox для центрирования изображения по горизонтали и вертикали — это всего лишь вопрос сочетания обоих методов: горизонтального и вертикального.

<div>
  <img src="https://smart-frontend.ru/wp-content/uploads/2024/02/otfiltrovat-massiv-v-js.jpg">
</div>

div {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
  
}

img {
    width: 250px;
}

<div> (контейнер (или div-обёртка), содержащая изображение, которое нам нужно центрировать;
height: 500px (устанавливает высоту для обёртки, которая больше высоты изображения);
display: flex (присваивает обёртке значение flexbox);
justify-content: center (центрирует flex-элементы по горизонтали; изображение является единственным гибким элементом в этом примере при условии, что свойство flex-direction оставлено по умолчанию;
align-items: center (центрирует flex-элементы по вертикали; изображение является единственным flex-элементом в этом примере при условии, что свойство flex-direction оставлено по умолчанию;
width: 250px (задаёт ширину изображения меньше 100%; можно использовать значение % вместо пикселей, чтобы улучшить адаптивность).

Как поставить картинку по центру в CSS ручным способом

Этот метод представляет собой ручной способ центрирования изображения по вертикали и горизонтали. Он более сложный, чем другие методы, но является таким же адаптивным.

<div>
  <img src="https://smart-frontend.ru/wp-content/uploads/2024/02/otfiltrovat-massiv-v-js.jpg">
</div>

div {
    position: relative;
    height: 500px;
}

img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
}

<div> (контейнер (или div-обёртка), содержащая изображение, которое нам нужно центрировать;
position: relative (выравнивает изображение по отношению к обёртке);
height: 500px (устанавливает высоту для обёртки, которая больше высоты изображения);
position: absolute (позволяет точно установить, где будет располагаться изображение);
left: 50% (устанавливает горизонтальное центрирование левой части изображения);
top: 50% (устанавливает вертикальное центрирование верхней части изображения);
transform: translate(-50%, -50%) (настраивает положение изображения так, чтобы оно перемещалось вверх на 50% от его высоты и влево на 50% от его ширины, чтобы центр изображения был отцентрирован по горизонтали и вертикали);
width: 25% (мы устанавливаем ширину равной 25% вместо явного указания высоты и ширины; означает, что она может изменяться по мере необходимости, и этот метод продолжит центрировать наше изображение по вертикали).

Читайте также: Липкий футер с помощью Flexbox.