html - 垂直居中显示 Web 浏览器中的滚动条

Question

我是 html 的新手，我一直在玩这个 css 文件来使我的表单居中 我已经让它工作了，但我现在唯一的问题是它使网络浏览器显示滚动条。 没有它们，我怎么能让它工作？

@import url(https://fonts.googleapis.com/css?family=Roboto:300);
 .outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  background: #FFFFFF;
  width: 400px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.inner input[type=text],
.inner input[type=password] {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.inner .RememberMe input,
.inner .RememberMe label {
  float: right;
  color: #b3b3b3;
  font-size: 12px;
  margin-bottom: 15px;
  margin-top: -8px;
}
.inner button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.inner button:hover,
.inner button:active,
.inner button:focus {
  background: #43A047;
}
.inner .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.inner .message a {
  color: #4CAF50;
  text-decoration: none;
}
.inner .checkbox {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 15px;
}
.inner .register-form {
  display: none;
}
body {
  /* fallback for old browsers */
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="outer">
  <div class="middle">
    <div class="inner">

      <form class="register-form">
        <input type="text" placeholder="Username" id="register_username" />
        <input type="password" placeholder="Password" id="register_password" />
        <input type="text" placeholder="Email address" id="register_email" />
        <button id="register_button">create</button>
        <p class="message">Already registered? <a href="#">Sign In</a>
        </p>
      </form>

      <form class="login-form">
        <input type="text" placeholder="Username" id="login_username" />
        <input type="password" placeholder="Password" id="login_password" />
        <div class="RememberMe">
          <input type="checkbox" id="remember_me">
          <label>Remember me</label>
        </div>
        <button id="login_button">login</button>
        <p class="message">Not registered? <a href="#">Create an account</a>
        </p>
      </form>

    </div>
  </div>
</div>

Answer 1

原因是您有一个宽度/高度为 100% 的 div，但是，主体边距不为零。

要修复，只需将 body 部分从您的 css 更改为:

body {
  padding: 0;
  margin: 0;
  /* fallback for old browsers */
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
}