83

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>
4

7 Answers 7

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.

2
31

You can try using the following CSS:

table {
    margin: 0 auto;            
}​
1
  • 9
    Some bandwith can be saved by removing px.
    – Stephan
    Jul 20, 2014 at 4:43
12

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>
1
  • Was trapped in same situation because of HTML4 and HTML5 conflicts and alignment="centre" was absolute in HTML5.
    – Gopal00005
    Apr 15, 2015 at 6:36
8
<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>
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.

2

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>

-1

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.