Question

我正在尝试设计如下的四舍五入登录表单。为此，我需要垂直和水平对齐中心。

我将外部潜水设为相对，将内部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>

Answer 2

尝试将内部div（pos-r）的位置设置为固定值，以使元素进入圆圈

.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: fixed;
}

<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 3

使用display:flex和align-items:center可以实现。我在CSS类下面进行了更改，并从HTML中删除了内联height和width。

.pos-r {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.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;
  display: flex;
  align-items: center;
  height: 100%;
}

<div class="login-container">
  <div class="login-circle pos-a centerXY">
    <div class="login-contant pos-r">

      <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 4

使用flexbox对其进行简化：

.login-container{
    background-color: aliceblue;
}

.login-circle
{
    background-color: aqua;  margin: auto;
    border: solid 10px blue;
    color: #555555;
    border-radius: 50%;
    width: 300px;
    height: 300px;
}
    
.flex{   
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 150px;
    margin: 0 auto;
}

<div class="login-container">
  <div class="login-circle">
    <div class="flex">
      <span>Sign In</span>
      <input placeholder="Username">
      <input placeholder="Password">        
      <button>Login</button>
     </div>
  </div>
</div>

CSS中圆的元素中心

4 个答案: