How to Center Text in a Table Cell using CSS?

To center text in a table cell, you can use the text-align property. You just need to set the text-align property to center on any table cell you want. It will automatically center the text inside the table cell.

Let’s say we have the following table in out HTML file:

<table border="1">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>23</td>
    </tr>
    <tr>
        <td>James</td>
        <td>Bond</td>
        <td>26</td>
    </tr>
    <tr>
        <td>Nick</td>
        <td>Jonas</td>
        <td>25</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>24</td>
    </tr>
</table>

Now, to center the text inside each table cell, we can simply set the text-align property to center.

This is how you can do it in your CSS file:

table{
    border-collapse: collapse;
}
td,th{
    padding: 10px 20px;
}

/*Center align table cell text*/
td{
    text-align: center;
}

This is how the table will look like after applying above CSS styles:

Thanks for reading.