Задать вопрос
@mspalding
html

Как центрировать элемент и по вертикали, и по горизонтали?

Пытаюсь разместить svg по центру экрана (и по горизонтали, и по вертикали).
По горизонтали получилось, по вертикали - не поддаётся...
<!DOCTYPE html>
<html>
<head></head>

<style>
body {
  background: green;
}
</style>

<body>

    <div align="center">
        <svg width="250" height="250" viewBox="0 0 250 250">
            <g transform="translate(0.000000,250.000000) scale(0.100000,-0.100000)"
fill="#ffffff">
<path d="M1087 2180 c-354 -64 -637 -318 -744 -667 -25 -81 -27 -101 -27 -263
0 -162 2 -182 27 -263 97 -315 329 -547 644 -644 81 -25 101 -27 263 -27 162
0 182 2 263 27 315 97 547 329 644 644 25 81 27 101 27 263 0 162 -2 182 -27
263 -97 316 -332 550 -644 643 -73 22 -112 27 -233 30 -80 1 -167 -1 -193 -6z
m336 -95 c327 -69 593 -335 662 -662 19 -87 19 -259 0 -346 -69 -327 -335
-593 -662 -662 -87 -19 -259 -19 -346 0 -327 69 -593 335 -662 662 -19 87 -19
259 0 346 69 325 333 591 658 662 83 18 266 18 350 0z"/>
            </g>
        </svg>
    </div>
</body>
</html>
  • Вопрос задан
  • 617 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
hisbvdis
@hisbvdis
Использование атрибута "align" для html-элементов осуждается. Так делать не нужно.
Через классы задаём высоту блока на весь экран и центрируем (например, через Flexbox) его содержимое (внутренний svg-элемент)

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}


Результат:
Код + демонстрация: https://codepen.io/hisbvdis/pen/qBBMGLp

5dcc1651ad5ad603526172.png
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Meakin
.класс{
display:flex;
align-items:center;
justify-content:center;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Парсер-бот
22 дек. 2024, в 20:12
10000 руб./за проект
Ещё заказы