How to put table in the center of the page using CSS?

Question

I am using the following code. How to put this table in the center of the page using CSS?

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>The Main Page</title>
    </head>
    <body>
        <table>
            <tr>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
            </tr>
        </table>
    </body>
</html>

Duplicate of many other questions e.g. http://stackoverflow.com/questions/2281087/center-a-div-in-css — jacktheripper, Feb 22 '12 at 21:03
possible duplicate of [Vertically align div (no tables)](http://stackoverflow.com/questions/1909753/vertically-align-div-no-tables) — JonH, Feb 22 '12 at 21:10

Michael Robinson · Answer 1 · 2022-07-24T09:58:28.793

108

Edit for 2022: Flexbox Please

Use Flexbox, instructions here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

.box {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  width: 400px;
}

.box div {
  background-color: blue;
  width: 100px;
  height: 100px;
}

<div class="box">
  <div></div>
</div>

2021 answer preserved below.

html, body {
    width: 100%;
}
table {
    margin: 0 auto;
}

Example JSFiddle

Vertically aligning block elements is not the most trivial thing to do. Some methods below.

edited Jul 24 '22 at 09:58

answered Feb 22 '12 at 20:59

Michael Robinson

29,278
12
104
130

Hey, but this only centered it horizontally and not vertically. Also, what is margin: 0 auto? – CodeBlue Feb 22 '12 at 21:05
@CodeBlue - then see this: http://stackoverflow.com/questions/1909753/vertically-align-div-no-tables – JonH Feb 22 '12 at 21:10

DarkAjax · Answer 2 · 2020-02-03T20:24:01.410

31

You can try using the following CSS:

table {
    margin: 0 auto;            
}

edited Feb 03 '20 at 20:24

answered Feb 22 '12 at 20:59

DarkAjax

15,955
11
53
65

9

Some bandwith can be saved by removing `px`. – Stephan Jul 20 '14 at 04:43

score 12 · Answer 3 · answered Apr 15 '15 at 06:19

1) Setting horizontal alignment to auto in CSS

margin-left: auto; margin-right: auto;

2) Get vertical alignment to centre of the page add following to css

html, body { width: 100%; }

For example :

<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}

html, body {
    width: 100%;
}

</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
        <tr>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
        </tr>
</table>

</body>
</html>

Was trapped in same situation because of HTML4 and HTML5 conflicts and `alignment="centre"` was absolute in HTML5. — Gopal00005, Apr 15 '15 at 06:36

score 8 · Answer 4 · answered Jan 21 '14 at 05:23

<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}
</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
  <tr>
    <th>SNO</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>1</td>
    <td>yazali</td>
  </tr>
</table>

</body>
</html>

score 2 · Answer 5 · answered Mar 16 '15 at 09:30

2

If you where asking about the table to complete center, like some thing in total center., you can apply the following code.

margin: 0px auto;
margin-top: 13%;

this code in css will let you put your table like floating. Tell me if it helps you out.

answered Mar 16 '15 at 09:30

Alok Rajasukumaran

381
1
5
20

score 1 · Answer 6 · answered Feb 23 '21 at 20:29

You can use "display: flex;".

body{
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex; /* WIDTH and HEIGHT are required*/
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
</head>
<body>
    <table border>
        <tr>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
        </tr>
    </table>
</body>
</html>

score -1 · Answer 7 · answered Apr 07 '15 at 11:48

-1

simply put it in the div then control that div whit css:

<div class="your_position">
  <table>
  </table>
</div>

answered Apr 07 '15 at 11:48

mohsen solhnia

366
3
15

How to put table in the center of the page using CSS?

7 Answers7

Edit for 2022: Flexbox Please

Linked

Related