How to center a container when using flexbox on website?

HTML-CSS
1

Hi all,
what is the best practice to center the container when using flexbox?

.wrapper {
  background: lightgreen;
  max-width: 300px;
  margin: 0 auto;
}

or

body {
  display: flex;
  justify-content: center;
}

.wrapper{
  background: lightgreen;
  max-width: 300px;
  flex-grow: 1;
}

Is there a better solution than these two?

2

I wouldn’t do display: flex; on body so #1 for me :slight_smile: You should stay away from applying layout styles to body and specially from appending HTML nodes to it. Consider this as a root folder and many other services (incl. those beyond your control) will use it, so it’s a good idea to have your div.wrapper as your home where you can do whatever you want :slight_smile: The only thing that I wouldn’t limit my home to 300px, if you need some 300px-space put it inside .wrapper

1 Like
3

300px was just an example :slightly_smiling_face:
So is this the current practice to style wrapper to make it center?

.wrapper {
  background: lightgreen;
  max-width: 300px;
  margin: 0 auto;
}