Question

body {
  background-color: #ecf0f1;
}

.sign-box {
  position: relative;
  padding: 20px;
  padding-bottom: 20px;
  border: 1px solid #bdc3c7;
  border-radius: 4px;
  background-color: white;
}


.input-box {
  padding: 10px 10px 20px 10px;
  border: 0px;
  border-bottom: 2px solid #606060;
  width: 100%;
  font-size: 14px;
  font-weight: 600 !important;
  color: #606060;
}

.input-box:focus {
  color: #9b59b6;
  border-bottom: 2px solid #9b59b6;
}

.submit-btn {
  margin-top: 20px;
  padding: 12px 10px 12px 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  border: 1px solid #8e44ad;
  border-radius: 40px;
  width: 100%;
  color: white;
  background-color: #9b59b6;
  transition: all 0.25s ease-in-out;
}

.submit-btn:hover {
  color: white;
  background-color: #8e44ad;
  box-shadow: 0 6px 16px rgba(145, 92, 182, .4);
}

.h2-form {
  margin-bottom: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #606060;
}

.col-centered {
  float: none;
  margin: 0 auto;
}

<!DOCTYPE html>
<html lang="en">

  <head>

    <title>sfs!</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="main.css">

  </head>

  <body>

    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-centered sign-box">
          <h2 class="h2-form">Sign in!</h2>
          <form>
            <div class="form-group">
              <input class="input-box" type="email" class="form-control" id="email" placeholder="Email address">
            </div>
            <div class="form-group">
              <input class="input-box" type="password" class="form-control" id="pwd" placeholder="Password">
            </div>
            <button type="submit" class="submit-btn">SIGN IN</button>
          </form>
        </div>
      </div>
    </div>

  </body>

</html>

我需要它垂直对齐到网页的中心。我已登录并注册网页，类似于我提供的网页，我需要两者准确对齐网页的中心而不会看起来很奇怪。

Answer 1

您可以使用类＆＃34; container＆＃34;：

将以下代码应用于div

position: relative; 
top: 50%;
transform: translateY(-50%);

这会将顶部形状精确地移动到屏幕中间，然后将其向后移动，其价值恰好是其高度的50％。

Answer 2

以.col为中心的高度并使用它 CSS

.col-centered {
  float: none;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  position: fixed;
  max-height:350px;
}

Link for reference

希望这会有所帮助......

Answer 3

Flexbox也会这样做：

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

Answer 4

You can benefit of the display table and table-cell box model algorithm

html,body {
height : 100%;
}

.table {
    display: table;
    height: 100%;
    margin: 0;
}

.table__cell {
    display: table-cell;
    vertical-align: middle;
}


    <div class="table">
        <div class="table__cell">
         your markup 
        </div>
    </div>


[Result][1]
  [1]: https://i.stack.imgur.com/QKJKK.png

如何在Bootstrap中垂直对齐div到center？

4 个答案: