How to make the child Elements vertically in the middle of the parent with css?

Question

How to make the child Elements in the middle of the parent vertically automatically Whatever change parent's height with css

.

Answer 1

    parent{ 
    display:flex;
    align-items:center;
    justify-content:center;
    }

Answer 2

You can try this

.child{
  border:1px solid red;
  width:50px;
  height:50px;
  margin:10px;
}
.parent{
  display:flex;
  border:1px solid black;
  align-items:center;
  justify-content:center;
}

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

Answer 3

.parent {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: beige;
   height: 400px;
 }
 .child {
   background-color: aqua;
   flex: auto;
   text-align: center;
   height: 200px;
   display: inherit;
   justify-content: center;
   align-items: center;
   margin: 10px;
 }

<div class="parent">

  <div class="child">this is a test</div>
  <div class="child">this is a test</div>
  <div class="child">this is a test</div>

</div>

You can use flex..

Here is Html Code and change the code according to your needs:

<div class="parent">
   <div class="child">this is a test</div>
   <div class="child">this is a test</div>
   <div class="child">this is a test</div>
</div>

Here is CSS Code

.parent {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: beige;
   height: 400px;
 }
 .child {
   background-color: aqua;
   flex: auto;
   text-align: center;
   height: 200px;
   display: inherit;
   justify-content: center;
   align-items: center;
   margin: 10px;
 }

thank you ;)

Answer 4

First: share your code's please Second: Use margin: auto 0;. Third: its duplicate: How to horizontally center a <div>?