How to position a table at the center of the div horizontally and vertically with CSS?

Spread the love

Sometimes, we want to position a table at the center of the div horizontally and vertically with CSS.

In this article, we’ll look at how to position a table at the center of the div horizontally and vertically with CSS.

How to position a table at the center of the div horizontally and vertically with CSS?

To position a table at the center of the div horizontally and vertically with CSS, we use flexbox.

For instance, we write

#div {
  display: flex;
  justify-content: center;
  align-items: center;
}

to make the element with ID div a flex container with display: flex;.

Then we use justify-content: center; to center its contents horizontally.

And we use align-items: center; to center its contents vertically.

Conclusion

To position a table at the center of the div horizontally and vertically with CSS, we use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *