How can I center My parent div vertically inside the body tag-CodePudding

I have a parent div inside a body and I want it to be vertically align at center with all the other child divs. If I am wrong in any of the points please let me know.

<style>
  .container{display:flex; justify-content:center; align-items:center;}
  .parent div{height:100px; width:100px; background-color:yellow; margin:10px auto;}
</style>
<body >
     <div class"parent">
           <div></div>
           <div></div>
           <div></div>
     </div>
</body>

CodePudding user response：

You just forgot = in

<style>
  .container{display:flex; justify-content:center; align-items:center;}
  .parent div{height:100px; width:100px; background-color:yellow; margin:10px auto;}
</style>
<body >
     <div >
           <div></div>
           <div></div>
           <div></div>
     </div>
</body>

CodePudding user response：

Add width and height to the body which is container and also add = to the :

  <style>
  .container{display:flex; justify-content:center; align-items:center; width:100%; height: 100vh;}
  .parent div{height:100px; width:100px; background-color:yellow; margin:10px auto;}
</style>
<body >
     <div >
           <div></div>
           <div></div>
           <div></div>
     </div>
</body>