What am I missing? Flexbox doesn't center the container in this snippet here

Question

I'm trying to center the container and I don't know why it doesnt work.

html,
body {
  height: 100%
}

.container {
  min-height: 20em;
  width: fit-content;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

Answer 1

Flexbox only centers its contents. In other words, adding flexbox to the container will center everything inside it.

To fix it, add flexbox to the body instead:

html, body {
   height:100vh;
   margin:0;
}
body {
   display: flex;
   align-items: center;
   justify-content: center;
}

.container{
   min-height:20em;
   width: fit-content; 
   background-color:#ffffff;
}

Answer 2

Try this!!!

*{
  margin: 0;
  padding: 0;
}
.parent{
  width: 100vw;
  height: 100vh;
  background: grey;
  display: grid;
  place-content: center;
}
.child{
  background: blue;
  width: 10vw;
  height: 10vh;
}

<div class="parent">
  <div class="child"></div>
</div>