How to center table?

Question

<form method="post">
    <table align="center" cellpadding="2" cellspacing="2" border="0">
        <tr>
            <td>Username:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login"></td>
        </tr>
    </table>
</form>

It does center the table but I want to center it in the page, the code above only centers it but it's on the top of the page.

like the image below:

You can use css styles for this. – Amit Rajput Feb 09 '16 at 11:29 — Amit Rajput, Feb 09 '16 at 11:29
There are some good answers! – Mohammad Kermani Feb 10 '16 at 19:19 — Mohammad Kermani, Feb 10 '16 at 19:19

GeorgeKaf · Answer 1 · 2016-02-09T11:36:21.083

4

You need css for this. Try this

.form,form {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
 }

Or you can try this

<div style="display:flex;justify-content:center;align-items:center;">
  <form></form>
</div>

edited Feb 09 '16 at 11:36

answered Feb 09 '16 at 11:31

GeorgeKaf

599
8
23

You should use tag, not class selector for the form – Kristijan Iliev Feb 09 '16 at 11:35
Yes, you are right. Already edited it. – GeorgeKaf Feb 09 '16 at 11:36

score 4 · Accepted Answer · edited May 23 '17 at 12:08

First of all, there are some other good answers you can read: CSS tricks, Stackoverflow

Here you can do it by CSS 3:

HTML

 <div id="parent">
      <form method="post" id="child">
        <table align="center" cellpadding="2" cellspacing="2" border="0">
          <tr>
            <td>Username:</td>
            <td>
              <input type="text" name="username">
            </td>
          </tr>
          <tr>
            <td>Password:</td>
            <td>
              <input type="password" name="password">
            </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>
              <input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login">
            </td>
          </tr>
        </table>
      </form>
    </div>

and CSS:

#parent {
  width: 500px;
  height: 600px;
  background-color: gold;
  position: absolute;
  /*it can be fixed too*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


}

Fiddle

Kristijan Iliev · Answer 3 · 2016-02-09T11:31:33.073

3

The easiest way to align vertically relative to screen is using vh measurments like this:

form{
  position: relative;
  top: 40vh;
}

<form method="post">
 <table align="center" cellpadding="2" cellspacing="2" border="0">
  <tr>
   <td>Username:</td>
   <td><input type="text" name="username"></td>
  </tr>
  <tr>
   <td>Password:</td>
   <td><input type="password" name="password"></td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td><input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login"></td>
  </tr>
 </table>
</form>

Notice that these measurement unit may not be supported in all browsers .

Another way is to use percentages which are relative to parent element height;

edited Feb 09 '16 at 11:31

answered Feb 09 '16 at 11:30

Kristijan Iliev

4,901
10
28
47

1

Of course this assumes that 1) the user has a browser that supports `vh` and 2) the form itself is exactly `20vh` tall... – Niet the Dark Absol Feb 09 '16 at 11:31
1

@NiettheDarkAbsol you are right, but I don't see how my answer got the downvotes. Maybe it is not the best solution, but definitely it is not a bad answer. – Kristijan Iliev Feb 09 '16 at 11:39

score 1 · Answer 4 · answered Feb 09 '16 at 11:48

<div style="display: table; height:600px;">
<form method="post" style="display: table-cell; vertical-align: middle;">
    <table align="center" cellpadding="2" cellspacing="2" border="0">
        <tr>
            <td>Username:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login"></td>
        </tr>
    </table>
</form>
</div>

This is not working. See the [screenshot](http://i.imgur.com/PTSfg9L.png) — NSNoob, Feb 09 '16 at 11:55

score 1 · Answer 5 · answered Feb 09 '16 at 12:01

<style type="text/css">
    form
    {
        position: relative;
        top: 50%;
    }
</style>

<form method="post">
    <table align="center" cellpadding="2" cellspacing="2" border="0" >
        <tr>
            <td>Username:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>`enter code here`
            <td><input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login"></td>
        </tr>
    </table>
</form>enter code here

How to center table?

5 Answers5