CSS
How to Center a Table in CSS (Complete Guide)
Centering a table in CSS can be done in different ways depending on whether you want to center it horizontally, vertically, or both.
In this blog, we’ll cover:
✅ How to center a table horizontally
✅ How to center a table vertically
✅ How to center text inside table cells
✅ Best practices for styling centered tables
1. Centering a Table Horizontally
To center a table horizontally, use margin: auto; and set display: table;.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table Horizontally</title>
<style>
table {
width: 60%; /* Adjust width as needed */
margin: auto; /* Centers table horizontally */
border-collapse: collapse;
border: 2px solid #333;
}
th, td {
padding: 10px;
border: 1px solid #333;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>
</body>
</html>
✅ Why it works?
margin: auto;centers the table horizontally.border-collapse: collapse;ensures a clean table design.
2. Centering a Table Vertically
To center a table vertically, use Flexbox or CSS Grid with align-items: center;.
Example Using Flexbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table Vertically</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full height of viewport */
margin: 0;
}
table {
width: 50%;
border-collapse: collapse;
border: 2px solid #333;
}
th, td {
padding: 10px;
border: 1px solid #333;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>28</td>
</tr>
<tr>
<td>Bob</td>
<td>35</td>
</tr>
</table>
</body>
</html>
✅ Why it works?
display: flex;makes the body a flex container.justify-content: center;centers the table horizontally.align-items: center;centers the table vertically.
3. Centering a Table Both Horizontally and Vertically
To perfectly center a table in the middle of a page, combine Flexbox or Grid with margin: auto;.
Example Using Grid:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table Both Ways</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
}
table {
width: 50%;
border-collapse: collapse;
border: 2px solid #333;
}
th, td {
padding: 10px;
border: 1px solid #333;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Phone</td>
<td>$699</td>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
</table>
</body>
</html>
✅ Why it works?
display: grid; place-items: center;centers the table horizontally and vertically.height: 100vh;ensures full-screen height.
4. Centering Text Inside Table Cells
To align text inside table cells, use text-align: center; and vertical-align: middle;.
Example:
td, th {
text-align: center;
vertical-align: middle;
}
✅ Why it works?
text-align: center;aligns text horizontally.vertical-align: middle;centers text vertically within table cells.
5. Best Practices for Centering Tables in CSS
✅ Use margin: auto; for horizontal centering.
✅ Use Flexbox or Grid for vertical centering.
✅ Set text-align: center; and vertical-align: middle; for text inside table cells.
✅ Use responsive design by setting width: 50%; or using max-width.
Conclusion
Centering a table in CSS depends on whether you need horizontal, vertical, or both.
- ✅ Use
margin: auto;for horizontal centering. - ✅ Use Flexbox (
align-items: center;) for vertical centering. - ✅ Use CSS Grid (
place-items: center;) to center both ways. - ✅ Ensure text alignment with
text-align: center;.
By following these techniques, you can create beautifully centered tables in any web project.