如何在css中使形状居中答案

【问题标题】：How to centre a shape in css如何在css中使形状居中
【发布时间】：2019-10-08 18:00:25
【问题描述】：

我正在创建一个网站屏幕作为临时“即将推出的页面”。我在一些文字后面有一个圆圈。无论浏览器窗口的大小如何，文本似乎总是以页面为中心，但圆圈似乎在不同大小上移动位置。有没有办法让圆圈完全在文字后面？

作为代码新手，我遵循了一些教程，但似乎没有一个可以工作

这里是有问题的网站：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 代码
这样好吗

标签： css position css-position positioning shapes

【解决方案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;
 }

【讨论】：