How to center div inside div

Question

Im trying to center the container div within the body2 div. Can someone please help with this?

.body2{
    display: flex;
    justify-content: center;
    display: block;
    background-color: pink;
    padding: 40px 100px 100px 490px;  
 } 



.container {
    display: flex;
    background-color: #1F2937;
    flex-wrap: wrap;
    text-align: center;
    padding: 2px;


}

Hi and Welcome to SO. Please take the [tour] first. Then read [how to ask questions here](https://stackoverflow.com/help/how-to-ask). After that edit the question to meet the guidelines and provide a [repro] for debugging details. Your question is unclear so far, so please also add more details. Center vertical? center horizontally? — tacoshy, Jul 27 '22 at 20:01

score 0 · Answer 1 · answered Jul 27 '22 at 20:37

use flex for this

#container{
   width:20%;
   height:20vh;
   border:solid 1px red;
   }
   
#body{
border:solid 1px black;
height:calc(100vh - 4px);
display:flex;
justify-content:center;
align-items:center;
}

body,html{
margin:0;}

<div id='body'>
<div id='container'></div>
</div>

How to center div inside div

1 Answers1