CSS: How to Align a Table to the Center

Centering a table in your web page is a simple task, but it can be done in multiple ways depending on your layout preferences. In this article, we’ll cover how to align an HTML <table> to the center of a page or container using CSS — with clean, modern techniques.

Whether you’re using plain HTML or working within a CSS framework, this guide provides quick and effective solutions.

---

✅ Method 1: Using margin: auto (Best Practice)

This is the most common and recommended method, especially for block-level elements like <table>.

✅ CSS:

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

Or, more simply:

table {
  margin: 0 auto;
}

✅ HTML Example:

<table border="1" style="margin: 0 auto;">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anup</td>
    <td>25</td>
  </tr>
</table>

✔️ This works as long as the table is not floated and has a defined or intrinsic width.

---

✅ Method 2: Using Flexbox

If the table is inside a container, you can center it using Flexbox.

✅ CSS:

.container {
  display: flex;
  justify-content: center;
}

✅ HTML:

<div class="container">
  <table border="1">
    <tr>
      <td>Centered Table</td>
    </tr>
  </table>
</div>

✔️ Useful when you need to align multiple elements or control alignment responsively.

---

✅ Method 3: Text Alignment (for inline tables)

You can center a table using text-align: center if the table is inline or inline-block.

✅ CSS:

.parent {
  text-align: center;
}
table {
  display: inline-table;
}

✔️ This method is helpful when tables behave like inline elements.

---

✅ Method 4: Center Horizontally and Vertically (Full Page)

To center a table both horizontally and vertically using absolute positioning:

✅ CSS:

.centered-table {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

✔️ Ideal for splash pages, loading screens, or modal content.

---

❌ Common Mistakes

Mistake	Why It Fails
Using text-align: center on table	Doesn’t work — use on container instead
Floating the table	Prevents margin centering (margin: auto)
Forgetting defined width	Centering needs the table to have a width

---

🔚 Conclusion

Centering a table is easy and can be done with a few lines of CSS. For most cases, margin: 0 auto; is sufficient, but modern layouts may benefit from Flexbox or absolute positioning.

Choose the method that best fits your layout needs — whether you’re working on forms, dashboards, or reports.

---

📌 Quick Reference

Method	Best For
margin: auto;	Basic centering
Flexbox	Responsive layouts
text-align: center + inline-table	Inline elements
Absolute + transform	Full-page centering