html - CSS中的圆心元素

Question

我正在尝试设计如下所示的圆形登录表单。为此，我需要垂直和水平居中对齐。

我将外部 div 设为相对，将内部 div 设为绝对。但是，元素仍然在圆圈之外。请忽略我的元素样式。

我的代码，

.login-container{
    background-color: aliceblue;
    height: 100vh;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;    flex-wrap: nowrap;    box-sizing: border-box;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row wrap;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;display: table; 

}

.login-circle
{
    background-color: aqua;  margin: auto;
    border: solid 10px blue;
    color: #555555;
    border-radius: 50%;
   
    width: 300px;
    height: 300px;
}


.centerXY {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.pos-a{
    position: absolute;
}
.pos-r{
    position: relative;
}

<div class="login-container">
  <div class="login-circle pos-a centerXY">
    <div class="login-contant pos-r" style="width:120px;height:120px">

      <div class="pos-r centerXY">
        <div class=" pos-a centerXY">
          <span>Sign In</span>
          <input placeholder="Username">
          <input placeholder="Password">        
          <button>Login</button>
      </div>
    </div>
  </div>
</div>

Answer 1

你试过了吗Flexbox ？这是一种设计灵活的响应式布局结构的简单方法。

CSS:

.container { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

HTML:

<div class="container">
  <div>Text</div>
  <div>Text</div>
</div>