javascript - 如何使用 css 将它们居中，以便即使在调整窗口大小时它们也保持一致？

Question

我试图删除绝对位置并使用 flex 等实现 .container ......但是我仍然不知道该怎么做。我只希望我拥有的项目，例如圆形设计、文本、字段框，无论浏览器尺寸有什么变化，都能在垂直和水平方向保持一致。为了更好地理解，请查看上面发布的屏幕截图。非常感谢。这是我的代码：

body {
  margin: 0px;
  padding: 0px;
  background-color: #19181D;
}

.circle {
  height: 400px;
  width: 400px;
  border-radius: 50%;
  background: linear-gradient(#313247 0%, #19181D 30%);
}

.circle:before {
  content: '';
  height: 400px;
  width: 400px;
  background: linear-gradient(#FFD1DA 0%, #FF849D 5%, #2D2133 25%);
  border-radius: 50%;
  position: absolute;
  top: 43.8%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(7px);
  -webkit-filter: blur(7px);
  z-index: -1;
}

.circle:after {
  width: 415px;
  top: 35px;
  filter: blur(14px);
  -webkit-filter: blur(14px);
  opacity: .3;
}

.msg {
  font-family: sans-serif;
  font-size: 20px;
  color: white;
  letter-spacing: 45px;
  margin-left: auto;
  margin-right: auto;
}

.notify {
  font-family: sans-serif;
  font-size: 12px;
  color: #FFD1DA;
  letter-spacing: 2px;
}

.field {}

.field input {
  height: 35px;
  width: 300px;
  background-color: #101113;
  outline: none;
  border: none;
  border-radius: 35px;
  font-family: sans-serif;
  font-size: 10px;
  color: white;
  letter-spacing: 1px;
  padding-left: 15px;
}

.field button {
  height: 35px;
  width: 100px;
  background-color: #2E2D3B;
  font-family: sans-serif;
  font-size: 11px;
  color: white;
  letter-spacing: 1px;
  border: none;
  outline: none;
  border-radius: 35px;
  z-index: 999;
}

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

<div class="container">
  <span class="circle"></span>
  <span class="msg">COMING SOON</span>
  <span class="notify">GET NOTIFIED WHEN IT'S READY</span>
  <span class="field"> <input type="email" placeholder="ENTER YOUR EMAIL"/> <button>NOTIFY ME</button></span>
</div>

标签： javascripthtmlcss