2

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).

Siyah
  • 2,852
  • 5
  • 37
  • 63
Gopal1216
  • 421
  • 3
  • 7
  • 14

7 Answers7

8

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 :)

enguerranws
  • 8,087
  • 8
  • 49
  • 97
  • This answer should be updated to mention a flexbox way to achieve that. – enguerranws Aug 13 '18 at 08:08
  • Nope: did not work when my div 2 was wider that div1! I have this situation for a div2 containing a symbol either a line or a dot. I don't want the line to be as big as the rendered makes is (and which I cannot control) and I want the dot to be in the center of div1. (div1 clips div2.) – horiatu Apr 28 '22 at 19:59
  • div1 clips div2. In fact, kind of working, but not if I choose not to clip div2: div2 being bigger does not stay centered in div1! (Div2 width is auto with the symbol size.) – horiatu Apr 28 '22 at 20:05
1

I agree with the comment written by @Praveen but I would do some adjustments:

#div1{
   display: table-cell;
   vertical-align: middle;
}

#div2{
   margin: auto;
}
Noel Widmer
  • 4,444
  • 9
  • 45
  • 69
0

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 >

ascx
  • 473
  • 2
  • 13
0

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;
}
Praveen
  • 55,303
  • 33
  • 133
  • 164
Michelle Cantin
  • 583
  • 4
  • 15
  • It seems your `vertical-align` doesn't work as expected. – ascx Feb 28 '14 at 11:36
  • vertical-align doesn't work on block elements, need to set it to inline-block :) – enguerranws Feb 28 '14 at 11:41
  • *`vertical-align`* is a property which works only with [**`inline-level and table-cell elements`**](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) – Praveen Feb 28 '14 at 11:45
0
   <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

Aqib Shehzad
  • 79
  • 1
  • 8
0

//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>
user3335780
  • 121
  • 1
  • 5
0
#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%);
}
andlap24
  • 1
  • 1