how can i center my flexbox in the middle of the screen?

Question

Hi i want ask how can i center box (div) in the middle of the screen?

.mybox
{
    display: flex;
    width: 250px;
    height: 250px;
    background: white;
}

<div class="mybox"></div>

Answer 1

Have a look at this code snippet. This should work for any div.

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

section {
  width: 200px;
  border: 1px solid #2d2d2d;
  display: flex;
  justify-content: center;
}

<div class="center-screen">
  <section>
    <div>Your Content Here</div>
  </section>
</div>

Answer 2

you will need the flex container and define the flex item. For example, If you want to use center

<div class="container">
    <div class="mybox"></div>
    </div>

and the css file should be:

 .container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
        }
      .mybox {
        width: 250px;
        height: 250px;
        background: black;
      }

or you can use margin:

.mybox{
  margin: 0 auto;
}