How to align the entire HTML body to the center with CSS?

Spread the love

Sometimes, we want to align the entire HTML body to the center with CSS.

In this article, we’ll look at how to align the entire HTML body to the center with CSS.

To align the entire HTML body to the center with CSS, we use flexbox.

For instance, we write

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

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

Then we make its flex direction vertical with flex-direction: column;.

Then we center its contents vertically with justify-content: center;

To align the entire HTML body to the center with CSS, we use flexbox.