Center an element vertically

Question

I want to center the form vertically. Horizontally it can be done with margin: 0 auto, but I don't know how to do it vertically.

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

[Center Elements Vertically and Horizontally with Flexbox](http://stackoverflow.com/a/33049198/3597276) — Michael Benjamin, Jul 15 '16 at 13:18
... or [using CSS table and positioning properties](http://stackoverflow.com/a/31977476/3597276) — Michael Benjamin, Jul 15 '16 at 13:20

score 2 · Answer 1 · answered Jul 15 '16 at 13:49

* {
      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;
    }

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

score 0 · Answer 2 · answered Jul 15 '16 at 13:43

Try to remove your css code and add the below css code and check. It worked for me.

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

G-Cyrillus · Answer 3 · 2016-07-15T13:50:53.960

as mentioned, you may use flexbox model, even straight from HTML tag in your case :

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>

Center an element vertically

3 Answers3