Место div в центре другого div

Question

Мне нужно разместить прямоугольник div в середине другого прямоугольника div, который находится внутри еще одного контейнера div. Изображение внутри самого внутреннего div должно быть центрировано как по горизонтали, так и по вертикали относительно внешнего div. Как мне это сделать?

<div class="col-sm-4 col-sm-offset-1" style="margin-right:10px;"> 
    <div class="panel panel-default" style="min-height:320px;"> 
    <div class="panel-body" style="padding:0;">    
     <img src=""> 
    </div> 
    <div> 
</div> 

Answer 1

#div1{ 
 
    border:1px solid; 
 
    width:200px; 
 
    height:200px; 
 
} 
 

 
#div2{ 
 
    border:1px solid; 
 
    width:100px; 
 
    height:100px; 
 
    margin:25%; 
 
} 
 

 
#div3{ 
 
    border:1px solid; 
 
    width:50px; 
 
    height:50px; 
 
    margin:25%; 
 
}

<div id="div1"> 
 
    <div id="div2"> 
 
     <div id="div3"></div> 
 

 
    </div> 
 
</div>

Убедитесь, что все дивы имеют ширину и высоту установки и затем использовать:

margin: 25%; 

На внутренних дивы