Существует несколько способов разместить картинку по центру с помощью CSS. Один из них — использование свойств text-align и margin:
<div class="container">
img src="image.jpg" alt="Картинка">
</div>
.container {
text-align: center;
}
.container img {
margin: 0 auto;
}В этом примере мы задаем свойство text-align: center для контейнера, чтобы картинка была выровнена по центру горизонтально. Затем мы задаем свойство margin: 0 auto для картинки, чтобы она была выровнена по центру вертикально.
Еще один способ — использование свойства display и свойство margin:
<div class="container">
img src="image.jpg" alt="Картинка">
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container img {
margin: auto;
}В этом примере мы задаем свойство display: flex для контейнера, чтобы мы могли использовать свойства justify-content и align-items для выравнивания картинки по центру как по горизонтали, так и по вертикали. Также мы задаем высоту контейнера на 100% видимой области (100vh). Затем мы задаем свойство margin: auto для картинки, чтобы она была выровнена по центру по горизонтали.
