Html table center text vertically

Here are different ways to center table in CSS.

1. Center a Table using margin auto property

The CSS margin is used to set the space around the element. The margin auto enables dynamic and equal margins from both sides and center the element.

Syntax

table {
margin: auto;
}

By setting the margin auto the table automatically adjusts from the left and right side rendering it horizontally center on the web page.

Output

Explanation: The margin: left and margin: right property set to auto, and that utilize the remaining spaces and keep the table in the center.

How to align table in center in html

Div align: center

Table align: center

Table td align: center

Center table in div horizontally

2. Centering HTML table by using Flexbox Property

CSS flexbox Property provides a flexible way to align and distribute space among items within a container. It offers properties like display: flex for creating a flex container and justify-content, and flex to control item positioning, alignment, and sizing.

The align-items property can make the table data aligned to the center.

Syntax

.table-container {
/* Apply CSS Flexbox */
display: flex;

/* Center items horizonta

center table in div tailwind

center div in table cell