Question

我试图在任意大小的页面的中心放置一个圆形div，并在调整浏览器大小时使其垂直和水平响应。

到目前为止，我已设法将div放在页面中间，但它只是横向响应。如果可能的话，我还需要使它垂直响应。

你能提出一些建议吗？

    <div id="login">
      <div class="login-box">
        <h1 class="login-box__header">
          Login
        </h1>
        <form class="login-box__form-usr-details" action="/somesearchaction" name="search" method="get">
          <label for="user-email">Enter your email </label>
          <input title="Enter user email" placeholder="Enter your email" name="email" id="user-email" type="text"></input>

          <label for="user-password">Enter your password </label>
          <input title="Enter user password" placeholder="Enter your password" name="password" id="user-password" type="text"></input>

          <span class="forgot-pwd btn btn--white">Forgot password?</span>
          <span class="submit btn btn--blue">Login</span>
        </form>
      </div>
    </div>



#login{
    background: red;

    .login-box{
        background: green;
        width: 60%;
        height: 60%;
        overflow: auto;
        margin: auto;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 9999;
        border-radius: 50%;

        &__header{
                font-size: 20px
        }

        &__form-usr-details{
                font-size:25px;
        }
    }
}

Answer 1

您可以使用弹性框水平和垂直居中项目。您还必须将body的高度设置为100％：

的index.html

<body>
    <div id="login">
        …
    </div>
</body>

的style.css

html {
    height: 100%;
}

body {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

Answer 2

＆＃13;

body,html{
  height:100%;
  width:100%;
}
.container{
  width:100%;
  height:100%;
  position:relative;
  background:blue;
}
.round-div{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background: red;
  transform: translateX(-50%) translateY(-50%);
}

＆＃13;

<div class="container">
  <div class="round-div">
  </div>
 </div>

＆＃13;

将圆形div添加到最高：50％; 左：50％; transform：translateX（-50％）translateY（-50％）;

我希望你得到逻辑

Answer 3

您可以使用table display属性 （从IE8中了解） ：

https://jsfiddle.net/6g2ccpar/3/或以下代码段进行测试

html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#login {
  background: red;
  display: inline-table;
  width: 50%;
  max-width:90vh; /* remove this and find out resizing window's height */
  white-space:nowrap;/* keeps pseudo & login-box side by side */
}
#login:before {
   content:'';
   display:inline-block;
   width:0;
   padding-top:100%;/* will take parent's width for reference to draw a square */
   vertical-align:middle;/* along login-box */
  }
.login-box {
  background: green;
  border-radius: 50%;
  padding:0.5em 1px;
  display:inline-block;
  vertical-align:middle;/* along pseudo :before */
  white-space:normal; 
}
.login-box__header {
  font-size: 20px
}
.login-box__form-usr-details {
  padding: 0 1em;/* stay away from sides */
  font-size: 25px;
}
input, span[class] {
  display:block;
  margin:auto;
}
label {
  white-space: nowrap;/* evntually , looks better */
}

<div id="login">
  <div class="login-box">
    <h1 class="login-box__header">
          Login
        </h1>
    <form class="login-box__form-usr-details" action="/somesearchaction" name="search" method="get">
      <label for="user-email">Enter your email</label>
      <input title="Enter user email" placeholder="Enter your email" name="email" id="user-email" type="text" />

      <label for="user-password">Enter your password</label>
      <input title="Enter user password" placeholder="Enter your password" name="password" id="user-password" type="text" />

      <span class="forgot-pwd btn btn--white">Forgot password?</span>
      <span class="submit btn btn--blue">Login</span>
    </form>
  </div>
</div>

Answer 4

尝试将此应用于.login-box：

    width: 60vw;
    height: 60vw;

这应该保持登录框div的高度和宽度相对于视口的宽度。

在任何浏览器维度的中间将垂直和水平可伸缩div都居中

4 个答案: