Центрирование изображений в CSS

Центрирование изображений

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

Для этого в CSS есть несколько методов.

Центрирование изображения по горизонтали

Два распространённых варианта центрирования изображения по горизонтали — это margin: auto и display: flex.

Использование margin: auto

margin: auto — первый из двух вариантов центрирования по горизонтали.

Он не действует на строчные (inline) элементы, а <img> по умолчанию является строчным, поэтому сначала изображению нужно задать display: block.

Также необходима width, и она должна быть меньше ширины страницы.

Создайте страницу с изображением, центрированным по горизонтали с помощью margin: auto. Задайте изображению display: block с margin: auto и width: 50%.

> Результат: полная HTML-страница

Prompt

Создайте страницу с изображением, центрированным по горизонтали с помощью margin: auto. Задайте изображению display: block с margin: auto и width: 50%.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with margin auto</title>
<style>
img {
  display: block;
  margin: auto;
  width: 50%;
}
</style>
</head>
<body>

<h2>Centered Image</h2>

<img src="madrid.jpg" alt="Madrid">

</body>
</html>

Использование display: flex

display: flex даёт второй путь к центрированию по горизонтали.

Поместите элемент <img> внутрь <div>, а затем задайте этому контейнеру два объявления:

display: flex
justify-content: center (центрирование изображения по горизонтали)

Наконец, выберите для изображения width меньше ширины страницы.

Создайте страницу с изображением, центрированным по горизонтали с помощью flexbox. Поместите изображение внутрь контейнера div со свойствами display: flex и justify-content: center. Задайте ширину изображения 50%.

> Результат: полная HTML-страница

Prompt

Создайте страницу с изображением, центрированным по горизонтали с помощью flexbox. Поместите изображение внутрь контейнера div со свойствами display: flex и justify-content: center. Задайте ширину изображения 50%.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with Flexbox Horizontal</title>
<style>
div {
  display: flex;
  justify-content: center;
}

img {
  width: 50%;
}
</style>
</head>
<body>

<h2>Centered Image</h2>

<div>
  <img src="madrid.jpg" alt="Madrid">
</div>

</body>
</html>

Вертикальное и горизонтальное центрирование

Истинное центрирование означает оба направления сразу: по вертикали и по горизонтали. Это можно сделать с помощью display: flex или display: grid.

Использование display: flex

Чтобы с помощью flexbox центрировать изображение сразу по обеим осям, нужны все эти объявления вместе:

display: flex
justify-content: center (центрирование по горизонтали)
align-items: center (центрирование по вертикали)
height: 600px (какой высоты контейнер)

Поместите элемент <img> внутрь контейнера <div> и сделайте width изображения меньше ширины контейнера.

Создайте страницу с изображением, центрированным и по вертикали, и по горизонтали с помощью flexbox. Поместите изображение внутрь div со свойствами display: flex, justify-content: center, align-items: center, height: 600px и рамкой 1px solid black. Задайте ширину изображения 50%.

> Результат: полная HTML-страница

Prompt

Создайте страницу с изображением, центрированным и по вертикали, и по горизонтали с помощью flexbox. Поместите изображение внутрь div со свойствами display: flex, justify-content: center, align-items: center, height: 600px и рамкой 1px solid black. Задайте ширину изображения 50%.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with Flexbox Both Axes</title>
<style>
div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  border: 1px solid black;
}

img {
  width: 50%;
}
</style>
</head>
<body>

<h2>Centered Image</h2>

<div>
  <img src="madrid.jpg" alt="Madrid">
</div>

</body>
</html>

Использование display: grid

Чтобы с помощью grid центрировать изображение сразу по обеим осям, нужна такая комбинация:

display: grid
place-items: center (центрирование и по горизонтали, и по вертикали)
height: 600px (какой высоты контейнер)

Здесь элемент <img> тоже помещается внутрь контейнера <div>, а изображение получает width меньше ширины контейнера.

Создайте страницу с изображением, центрированным и по вертикали, и по горизонтали с помощью CSS grid. Поместите изображение внутрь div со свойствами display: grid, place-items: center, height: 600px и рамкой 1px solid black. Задайте ширину изображения 50%.

> Результат: полная HTML-страница

Prompt

Создайте страницу с изображением, центрированным и по вертикали, и по горизонтали с помощью CSS grid. Поместите изображение внутрь div со свойствами display: grid, place-items: center, height: 600px и рамкой 1px solid black. Задайте ширину изображения 50%.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with Grid Both Axes</title>
<style>
div {
  display: grid;
  place-items: center;
  height: 600px;
  border: 1px solid black;
}

img {
  width: 50%;
}
</style>
</head>
<body>

<h2>Centered Image</h2>

<div>
  <img src="madrid.jpg" alt="Madrid">
</div>

</body>
</html>