How can I center a div?-CodePudding

As you could see the total height is 1000px, inside their 3 boxes which give 600px height in total. What I'm trying to do is to make the last box be in the middle between box2 and end of container. Good solution would be margin: "auto 0" to box3, but it doesn't work.

How can I get that result?

.container {
  width: 1000px;
  height: 1000px;
  background: black;
}

.box1 {
  width: 100%;
  height: 200px;
  background: red;
}

.box2 {
  width: 100%;
  height: 200px;
  background: blue;
}

.box3 {
  width: 100%;
  height: 200px;
  background: green;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Use CSS Flexbox on your container class:

.container {
  width: 1000px;
  height: 1000px;
  background: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

example

CodePudding user response：

<div >
     <div ></div>
     <div ></div>
     <div >
          <div ></div>
     </div>
</div>

It would be easiest to do something like this, just give the center class the following styles:

.center{
  display:flex;
  justify-content:center;
  align-items:center;
  height: 600px;
}