垂直中心在Web浏览器中显示滚动条

Question

我是html的新手，我一直在玩这个css文件来集中我的表格 我有它的工作，但我现在唯一的问题是它的制作网页浏览器显示滚动条。 如何在没有它的情况下让它工作？

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

原因是你有一个100％宽度/高度的div，但是，身体边距不是零。

要修复，只需将css中的正文部分更改为：

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

Answer 2

在身体上使用overflow:hidden。或任何父容器真的

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Roboto:300);
body{
  overflow:hidden;
}
.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;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="css/style.css">
</head>

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

    <script src='js/jquery-3.1.1.min.js'></script>
    <script src="js/index.js"></script>

</body>

</html>

＆＃13;

＆＃13;

＆＃13;