Vertically Centering HTML Table

Question

Below is the code I made for a simple html table. My goal is to center the entire table vertically in the center of the page based on the users height of the device. I tried to make a div with the height as 100% and width as 100% and placing the table 50% from top and left and no luck. Any ideas?

body {
    background-color: #a00000;
}
table {
    margin: 50px auto 25px auto;
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
}
td {
    background-color: #fff;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}
img {
    max-width: 120px;
    max-height: 120px;
    border: solid 5px #a00000;
    border-radius: 5px;
    background-color: #a00000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bobcat Menu</title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <table align="center">
            <tr>
                <td>
                    <a href="mobincube://action/section/DropDay">
                        <img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/Schedule">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
                    </a>
                </td>      
            </tr>
            <tr>
                <td>
                    <a href="mobincube://action/section/Calculators">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/News">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
                    </a>
                </td>      
            </tr>    
        </table>
    </body>
</html>

OMG. There are tons of zillions of duplicated posts on stackoverflow.... and much more along internet. — Marcos Pérez Gude, Dec 29 '16 at 17:24
Personally I like this solution: http://stackoverflow.com/a/27532367/5035890 bulletproof! — Marcos Pérez Gude, Dec 29 '16 at 17:25

Rápli András · Answer 1 · 2016-12-29T17:32:13.633

1

Try adding the following CSS rules to the table element:

table{
    /* ... */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

edited Dec 29 '16 at 17:32

answered Dec 29 '16 at 17:25

Rápli András

3,869
1
35
55

score 1 · Accepted Answer · answered Dec 29 '16 at 17:26

You can use flexbox to achieve the result you're looking for.

Set both the body & html to height: 100%;

Wrap the table with a wrapper div and use:

.wrapper {
   display: flex;
   height: 100%;
}

set the table margins to margin: auto;

This will ensure your table is always perfectly centered.

body, html { 
    height: 100%;
}
body {
    background-color: #a00000;
    margin: 0; /* remove default margins added by browsers */
}
.wrapper {
   display: flex;
   height: 100%;
}
table {
    margin: auto;
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
}
td {
    background-color: #fff;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}
img {
    max-width: 120px;
    max-height: 120px;
    border: solid 5px #a00000;
    border-radius: 5px;
    background-color: #a00000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bobcat Menu</title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="wrapper">
        <table align="center">
            <tr>
                <td>
                    <a href="mobincube://action/section/DropDay">
                        <img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/Schedule">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
                    </a>
                </td>      
            </tr>
            <tr>
                <td>
                    <a href="mobincube://action/section/Calculators">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/News">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
                    </a>
                </td>      
            </tr>    
        </table>
        </div>
    </body>
</html>

user2736738 · Answer 3 · 2016-12-29T17:28:17.967

0

display: table-cell; Add this on the parent div and then use vrtical-align on the table itself.

html:
<div id="parent">
  <div id="child">Content here</div>
</div>

css:
#parent {display: table}

#child {
  display: table-cell;
  vertical-align: middle;
 }

edited Dec 29 '16 at 17:28

answered Dec 29 '16 at 17:22

user2736738

30,591
5
42
56

score 0 · Answer 4 · answered Dec 29 '16 at 17:29

I believe you can do something like this to get yourself vertically centered on any given browser.

table {
    margin: 50px auto 25px auto; 
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

https://jsfiddle.net/rodhartzell/s6x5toj9/

Vertically Centering HTML Table

4 Answers4