垂直居中元素

Question

我希望垂直居中。水平可以用margin: 0 auto完成，但我不知道如何垂直地做。

* {
  border: 1px solid red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Josefin Sans', sans-serif;
}
.form {
  margin: 0 auto;
  max-width: 600px;
  padding: 50px;
  width: 100%;
  background-color: #2C3E50;
}
.row {
  display: flex;
  width: 100%;
}
.col-12 {
  width: 100%;
  padding: 20px;
}
input {
  display: flex;
  width: 100%;
  padding: 10px;
  background-color: #2C3E50;
  border: 1px solid #FFFFFF;
  font-size: 25px;
  color: #ffffff;
}

<div class="form">
  <form>
    <div class="row">
      <div class="col-12">
        <input type="email" name="email" placeholder="Email Address" required>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <input type="password" name="password" placeholder="Password" required>
      </div>
    </div>
    <button>Login</button>
  </form>
</div>

Answer 1

＆＃13;

＆＃13;

* {
      border: 1px solid red;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      font-family: 'Josefin Sans', sans-serif;
    }
    .wrapper{
      display:table;
      }
    .form {
      margin: 0 auto;
      max-width: 600px;
      padding: 50px;
      display:table-cell;
      vertical-align:middle;
      width: 100%;
      background-color: #2C3E50;
    }
    .row {
      display: flex;
      width: 100%;
    }
    .col-12 {
      width: 100%;
      padding: 20px;
    }
    input {
      display: flex;
      width: 100%;
      padding: 10px;
      background-color: #2C3E50;
      border: 1px solid #FFFFFF;
      font-size: 25px;
      color: #ffffff;
    }

＆＃13;

<div class="wrapper">
    <div class="form">
      <form>
        <div class="row">
          <div class="col-12">
            <input type="email" name="email" placeholder="Email Address" required>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <input type="password" name="password" placeholder="Password" required>
          </div>
        </div>
        <button>Login</button>
      </form>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试删除您的css代码并添加以下css代码并检查。它对我有用。

body
    {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 1px solid;
    }
 * {
        border: 1px solid red;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        font-family: 'Josefin Sans', sans-serif;    
    }

    .form {
        margin: 0 auto;
        max-width: 600px;
        padding: 50px;
        width: 100%;
        background-color: #2C3E50;
          position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    }

    .row {
        display: flex;
        width: 100%;
    }

    .col-12 {
        width: 100%;
        padding: 20px;
    }

    input {
        display: flex;
        width: 100%;
        padding: 10px;
        background-color: #2C3E50;
        border: 1px solid #FFFFFF;
        font-size: 25px;
        color: #ffffff;
    }

Answer 3

如上所述，您可以使用flexbox模型，甚至直接来自HTML标签：

html {
  height: 100%;/* min-height is an issue with IE*/
  display: flex;
  /* next can be avoid by setting: margin:auto; to body; BUT IE has some bugs ... */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* if last three rules are dropped for html then :
body {
      margin:auto;*//* will be centered on both axis when a flex child */
/*} */
* {
  border: 1px solid red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Josefin Sans', sans-serif;
}
.form {
  margin: 0 auto;
  max-width: 600px;
  padding: 50px;
  width: 100%;
  background-color: #2C3E50;
}
.row {
  display: flex;
  width: 100%;
}
.col-12 {
  width: 100%;
  padding: 20px;
}
input {
  display: flex;
  width: 100%;
  padding: 10px;
  background-color: #2C3E50;
  border: 1px solid #FFFFFF;
  font-size: 25px;
  color: #ffffff;
}

<div class="form">
  <form>
    <div class="row">
      <div class="col-12">
        <input type="email" name="email" placeholder="Email Address" required>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <input type="password" name="password" placeholder="Password" required>
      </div>
    </div>
    <button>Login</button>
  </form>
</div>