How to center a table inside of a div?

Question

I want to make any elements inside of div to be centered vertically and horizontally.

Here's my HTML :

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<div class="login">
    <form action="prosesLogin.php" method="post">
        <h1>Login</h1>
        <table>
            <tbody>
                <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 colspan="2" align="right"><input type="submit" value="Login"> <input type="reset" value="Batal"></td></tr>
                <tr><td colspan="2" align="center">Belum memiliki akun ? <a href="register.php"><b>Daftar</b></a></td></tr>
            </tbody>
        </table>
    </form>
</div>
</body>
</html>

and this is my CSS :

.login{
   height: auto;
   margin: 0 auto;
   border:1px solid blue;
}

But it doesn't work, please tell how to make it. Thank you.

score 1 · Accepted Answer · answered Mar 15 '17 at 22:59

You can achieve this by using a flexbox display in your CSS (docs: https://www.w3schools.com/css/css3_flexbox.asp):

.login{
   height: auto;
   margin: 0 auto;
   border:1px solid blue;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding-top: 10px;
   padding-bottom: 10px;
}

.login h1 {
   margin-top: 0;
}

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<div class="login">
    <form action="prosesLogin.php" method="post">
        <h1>Login</h1>
        <table>
            <tbody>
                <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 colspan="2" align="right"><input type="submit" value="Login"> <input type="reset" value="Batal"></td></tr>
                <tr><td colspan="2" align="center">Belum memiliki akun ? <a href="register.php"><b>Daftar</b></a></td></tr>
            </tbody>
        </table>
    </form>
</div>
</body>
</html>

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

<div id="parent">
    <div id="child">body</div>
</div>

<style>
#parent {display: table;}
#child {
    display: table-cell;
    vertical-align: middle;
}
</style>

Another variants Vertical alignment of elements in a div

edited May 23 '17 at 11:46

Community

1
1

answered Mar 15 '17 at 22:55

Oleg Borodko

106
1
10

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

The Internet already has lots of answer to this question...

Given that, if needed, you can handle the table as a normal block container by just using the display:block css property.

edited May 23 '17 at 12:32

Community

1
1

answered Mar 15 '17 at 22:56

Shalen

272
3
14

How to center a table inside of a div?

3 Answers3