Centering table in the middle of div, vertically and horizontally

Question

How can I center a table inside a div, like this:

enter image description here

I have tried several methods, but none of them worked. Here is one of them.

<div style="width: 500px; height: 200px; border: 1px solid black; vertical-align: middle; text-align: center;">
    <table style="border: 1px solid black;">
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
    </table>
</div>

Can it be accomplished, if so, how?

There are for sure multiple methods to achieve this. You could, for example use a little Javascript. — Wottensprels, May 22 '13 at 14:27
I am wondering if maybe there is a CSS (cleaner) way, besides using Javascript. — Bruno Klein, May 22 '13 at 14:28
Here is a fairly good primer on just such a topic: http://css-tricks.com/centering-in-the-unknown/ — Joel Etherton, May 22 '13 at 14:29

score 0 · Answer 1 · answered May 22 '13 at 14:38

0

You can always put it in <center> tags or put in the style the center tag. works for sure!

if it is in another div, you might use a left:50%; orsomething like that aswell.

answered May 22 '13 at 14:38

Ryan de Vries

676
4
13

score 0 · Answer 2 · edited May 23 '17 at 12:13

Center tag is deprecated: Why is the <center> tag deprecated in HTML?

The link by Joel Etherton is really good, I just wanted to supply some code so you can see your table in there.

Check out this jsfiddle I whipped up for you: http://jsfiddle.net/25hzA/1/

If jsfiddle is down.

HTML:

I am not being centered
<div class="block" style="height: 100px;">
 <div class="centered">
  <table style="width:100%;border: 1px solid black;">
   <tr>
    <td>testing</td>
    <td>testing</td>
   </tr>
  </table>
 </div>
</div>

CSS:

.block {
 text-align: center;
 background: #c0c0c0;
 border: #a0a0a0 solid 1px;
 margin: 20px;
}
.block:before {
 content:'';
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 margin-right: -0.25em;
 /* Adjusts for spacing */
}
.centered {
 display: inline-block;
 vertical-align: middle;
 width: 300px;
 padding: 10px 15px;
 border: #a0a0a0 solid 1px;
 background: #f5f5f5; 
}

Centering table in the middle of div, vertically and horizontally

2 Answers2