时间戳

首页 > 解决方案 > 如何在css中使形状居中

css - 如何在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>>

我希望看到文本后面的圆圈，但它似乎随着不同尺寸的屏幕和窗口移动

标签： csspositioncss-positionpositioningshapes

解决方案

请为你的圈子班写这个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;
 }

推荐阅读