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

小开

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.

小开

You can try using the following CSS:

table {
margin: 0 auto;
}

小开

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

小开

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.

小开

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

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

小开

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>

小开

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>