How to center a div inside another div - html

Question

Suppose I have two nested divs. Something like below:-
<div id="div1">Some name here
<div id="div2">DIV2</div>
</div>
Suppose the height and width of div1 is 100px. And the height and width of div2 is 50px. How do I make them appear concentric i.e div2 must lie inside div1 equidistant from all sides (using CSS).

Answer 1

If the two divs got fixed dimensions, you can simply put a margin on the second div. In your case :
#div2 {
margin: 25px;
}
Or, if the divs got variable dimensions, try :
#div1 {
position: relative;
}
#div2 {
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
OR :
#div1 {
text-align: center;
}
#div2 {
display: inline-block;
vertical-align: middle;
}
That's all the way I know to achieve that :)

Answer 2

I agree with the comment written by #Praveen but I would do some adjustments:
#div1{
display: table-cell;
vertical-align: middle;
}
#div2{
margin: auto;
}

Answer 3

You can use the automatic left and right margins like the following:
<style>
div#container {
border: 1px solid #000000;
width: 500px;
height: 200px;
}
div#inner {
border: 1px solid #FF0000;
width: 200px;
height: 100px;
margin: 0 auto;
}
</style>
<div id="container">
<div id="inner"></div>
</div>
JSFiddle Demonstration >

Answer 4

First, you might want to use percentages for widths in order to make them responsive.
To center div2 horizontally, insert the following in your css:
#div2 {
margin:0 auto;
}
To center div2 vertically,
#div1 {
display:block;
height: 100%;
}
#div2 {
vertical-align: middle;
display:block;
}

Answer 5

<style>
#div1
{
border: 1px solid blue;
width: 100px;
height:100px;
}
#div2
{
margin-left:20px;
border: 1px dotted red;
width:50px;
height:50px;
}
</style>
<div id="div1">Some name here
<div id="div2">DIV2</div>
</div>
here is the code to show div in another div with centre css

Answer 6

//If you have height of outer box and inner box both in px or em etc not in % or auto. Here just a logic given using a formula
#div1 {
display:block;
height: 500px;
width:50%;
margin: 0 auto;
border: 1px solid red;
}
#div2 {
display:block;
width:50%;
height:60px;
border: 1px solid green;
margin: -moz-calc( (500px - 60px) / 2 ) auto; // (height of outer box - height of inner box )/2
}
//may be you can manage height dynamically using js this should work for height in % also
<script type="text/javascript">
var div1_height = $('#div1').height();
var div2_height = $('#div2').height();
var top_margin = (div1_height-div2_height)/2;
$('#div2').css('margin',top_margin+'px auto');
</script>

Answer 7

#div1 {
display: grid;
place-content: center;
}
---
#div1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
---
#div1 {
display: flex;
}
#div2 {
margin: auto;
}
---
#div1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}