'Why isn't this centering the div in the middle of body? [duplicate]

<style>
  .maincont {
    width: 8em;
    height: 8em;
    background: purple;
  }

  body {
    background: limegreen;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
  }
</style>

<body>
  <div class="maincont"></div>
</body>

Why doesn't this code make the purple square centered in the page? The flex-direction property set to column should have placed it in the middle vertically right?

htmlcsscenter


Solution 1:[1]

After I checked there is no problem with it, the purple box can be in center of the page, try clearing cache and cookies on the browser you are using then restart

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tamam45

Related Questions