Как центрировать фигуру в css

Я создаю экран веб-сайта как временную страницу «скоро». У меня есть круг за некоторым текстом. Кажется, что текст всегда находится в центре страницы, независимо от размера окна браузера, но круг, кажется, перемещается по разным размерам. Есть ли способ сделать круг полностью позади текста?

Будучи новичком в кодировании, я следовал некоторым учебникам, но ни один из них не работал.

Вот сайт, о котором идет речь: http://unixcast.com/

body{
    margin: 0px;
    padding: 0px;
    background-color: #19181D;
}
.circle{
    height: 400px;
    width: 400px;
    border-radius: 50%;
    background: linear-gradient(#313247 0%,#19181D 30%);
    position: absolute;
    top: 20%;
    left: 35%;
}
.circle:before,
.cirlce:after{
    content: '';
    height: 400px;
    width: 400px;
    background: linear-gradient(#FF849D 0%,#FF849D 5%, #2D2133 25%);
    border-radius: 50%;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-filter:blur(7px);
    z-index: -1;
}
.cirlce:after{
    width: 415px;
    top: 35%;
    -webkit-filter:blur(14px);
    opacity: .3;
}
.unixcast{
    font-family: sans-serif;
    font-size: 40px;
    color: white;
    letter-spacing: 20px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.msg{
    font-family: sans-serif;
    font-size: 20px;
    color: white;
    letter-spacing: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <span class = "circle"></span>
    <span class = "unixcast"> UNIXCAST </span>
    <span class = "msg">IS COMING SOON!</span>
    <span class = "notifymsg"> GET NOTIFIED WHEN IT'S READY</span>
    <span class = "field">
        <input type = "email" name = "ENTER YOUR EMAIL"/>
        <button>NOTIFY ME</button>
    </span>
</body>
</html>>

Я ожидал увидеть круг прямо за текстом, но, похоже, он перемещается с экранами и окнами разного размера.

Пожалуйста, опубликуйте также свой html-код

Sfili_81 22.05.2019 11:33

разве это хорошо

Lewis Cooper 22.05.2019 11:37
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
2
44
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

пожалуйста, напишите этот css для вашего класса круга

.circle {
     height: 400px;
     width: 400px;
     border-radius: 50%;
     background: linear-gradient(#313247 0%,#19181D 30%);
     position: absolute;
     left: 0px;
     right: 0px;
     margin: auto;
     top: 0px;
     bottom: 0px;
 }

Другие вопросы по теме