Center a Table with CSS

At first sight, centering a table with CSS seems like an easy task. You just apply text-align: center; on the container and it’s all set. Or is it?

I have set up a simple table for demonstration purposes and added the text-align property to the body.

body {
    text-align: center;
}

The result? It’s still aligned left. Since tables are block level elements, this CSS property does nothing.

For you to understand this article, you should be familiar with the CSS box model, Flexbox, and Grid. Flexbox and Grid simplify things tremendously, but I am going to show you the traditional ways first. At least you will understand how much these new tools make our lives easier.

Centering with Margin

The most frequently used way to center a table is probably by setting:

table {
    margin: 0 auto;
}

This rule sets the top and bottom margins to zero and divides the available space evenly on the left and right. Note that this should be set on the table itself (or on the tag you want to center).

Or:

table {
    margin-left: auto;
    margin-right: auto;
}

If you want your table to be a certain width, you can do so as you would normally do. The margin auto will take care of splitting the remaining space.

table {
    width: 500px;
    margin: 0 auto;
}

You can do the same thing with percentages:

table {
    width: 50%; 
    margin: 0 auto; /* same as margin: 0 25%;  */
}

Centering with Flexbox

Flexbox is a relatively new set of tools, and it’s still not used as much as it could be.

body {
    display: flex;
    justify-content: center;
}

This results in the same behavior. It’s an entirely different logic though. I have set these properties on the body, not the table.

Centering with Grid

You can do the same thing using CSS grids with minor changes:

body {
    display: grid;
    justify-content: center;
}

Centering the Table Vertically

The margin auto trick won’t work here.

table {
    margin: auto auto;
}

This is the same:

table {
    margin: auto;
}

No matter how you write it, margin auto sets the margin to zero when it’s applied to the top or bottom margin.

Centering a table vertically with Flexbox or Grid is just as simple as doing it horizontally.

First with Flexbox:

body {
    display: flex; 
    align-items: center;
}

And with Grid:

body {
    display: grid; 
    align-items: center;
}

You might be wondering how they used to do it before Flexbox and Grid came along. People came out with all kinds of hacks. Here are a few:

body {
    vertical-align: middle;
}
table {
    display: inline-block;
}

So this sets the verticle align property to middle on the body element. But since it only works on inline elements, we also set the table to be inline-block.

Here is another trick:

table {
    margin-top: 50%;
}

Note that this won’t put it exactly in the center since the margin will be calculated from the top of the element. So in the case of the table, all this does is the table will start in the middle of the page. If it’s a long table, it will look bad. But you wouldn’t want to center a long table vertically, would you?

Understanding the CSS Box Model: Padding, Border, and Margin

When we are thinking about the content on the website, we think about the text, images, videos, forms on the page. Depending on what type of content we are dealing with, we can specify the width and height of our content. Read more