Как сделать SVG по центру?

Доброго времени суток!
Мне нужно сделать прелоадер, но я никак не могу поместить svg по центру экрана и сделать его адаптивным!
Скачать SVG
Вот HTML:
<div class="preloader" text-align="center">
       <img src="./BLACK_HOME.svg" alt="svg" class="loader">
</div>

Вот CSS:
.preloader{
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 50%;
                left: 50%;
                text-align: center;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                z-index: 999;
                background-color: #0D0D0D;
            }
            .loader{
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                z-index: 9999;
            }

Как сделать по центру экрана, как пофиксить и что желательно почитать/посмотреть?
  • Вопрос задан
  • 9424 просмотра
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
1. Во-первых, у вас SVG неправильный: сама картинка среди кучи пустого пространства.
2. Во-вторых, много лишнего CSS-кода.
3. В-третьих, лучше сделать через background-image, чтобы избежать ошибок масштабирования в IE.
4. В-четвертых я исправил и сжал ваш SVG:



Просто скопируйте SVG-код.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы