Vertically align element in container

Question

I need to vertically align my form in the middle of my first div. I have it centered horizontally but I can't get it to align in the middle vertically as well. Basically even distance from the top and bottom.

<div id="login" style="position:absolute; width: 300px; height: 100px; z-index: 15; top: 50%; left: 50%; margin: -50px 0 0 -150px; background-color: #d0e9fc; border: 1px solid #B5BCC7;">
  <div align="center" style="vertical-align: middle;">
    <form th:action="@{/login}" method="post">
      <table>
        <tr>
          <td>Username:</td>
          <td>
            <input type="text" name="username" id="username" />
          </td>
        </tr>
        <tr>
          <td>Password:</td>
          <td>
            <input type="password" name="password" id="password" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input class="sButton" type="submit" value="Sign in" label="Sign In" id="submitButton" />
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>

possible duplicate of [Vertically centering a div inside another div](http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div) — Paul Roub, Jun 30 '15 at 18:34
@Kepoly I have it centered but I need it to be in the middle of the div box it is in. I.E. even distance from both top and bottom of the box. — Schwarz, Jun 30 '15 at 18:36
do you mean you need the contents on the div . i.e the form to be centered? — Dan Cundy, Jun 30 '15 at 18:43
It's not clear what your issue is? Also change your Question title, as your demo has already solution for Title. — divy3993, Jun 30 '15 at 18:43
Is this any more centered It looks center to me: http://codepen.io/anon/pen/WvMNZE — Spade, Jun 30 '15 at 18:54

score 2 · Answer 1 · answered Jun 30 '15 at 18:44

2

Use this

#login {
    display: table;
}
#login > div {
    display: table-cell;
    vertical-align: middle;
}

answered Jun 30 '15 at 18:44

Jacob

2,212
1
12
18

score 0 · Accepted Answer · answered Jun 30 '15 at 18:43

Try this I removed the align="center" part as it is depreciated.

I changed your css from using absolute positioning to just center the div using margins.

I changed the height from always being 100px, to the height of the form plus 10px on each top and bottom. Vertically centering it.

I alsp added the margin:auto centering to the table to center the table in side the form.

<div id="login" style="width: 300px; margin:auto; background-color: #d0e9fc; border: 1px solid #B5BCC7;">
  <div style="margin: auto; padding-top:10px; padding-bottom:10px;">
    <form th:action="@{/login}" method="post">
      <table style="margin:auto">
        <tr>
          <td>Username:</td>
          <td>
            <input type="text" name="username" id="username" />
          </td>
        </tr>
        <tr>
          <td>Password:</td>
          <td>
            <input type="password" name="password" id="password" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input class="sButton" type="submit" value="Sign in" label="Sign In" id="submitButton" />
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>

The padding to the top and bottom of the second div tag worked. Thanks! — Schwarz, Jun 30 '15 at 19:23

score 0 · Answer 3 · answered Jun 30 '15 at 18:56

I removed the inline styling and added a class with the following properties: http://codepen.io/anon/pen/WvMNZE

.c {
  width: 300px;
  height: 100px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-color: #d0e9fc; border: 1px solid #B5BCC7;
}

body {
  margin: 0;
}

Vertically align element in container

3 Answers3