Center div inside parent div

Question

I'm trying to center a div inside a parent div based on the dimensions of the parent div. I have tried using:

display: inline-block;

because I have seen other questions where this was used to center the div but I am not having luck.

BOX1 should be centered insdie of test

<div class="tab-pane" id = "test">
    <div id="Box2"> 
        <h1> Graph Text </h1>
  </div>
    <div id="BOX1">
  </div>
</div>


#test {
    width:700px;
    height: 500px;
    background: grey;
    position:relative;
}

#BOX1 {
    display: inline-block;
    width: 500px;
    height: 300px;
    background: lightgrey;  
    position:absolute;
    z-index:1;
}

#Box2{
    width: 250px;
    height: 50px;
    background: lightblue;
    position:absolute;
    left: 125px;
    z-index:2;
}

h1 {
  font: 25px Helvetica, sans-serif;
  text-align: center;
}

http://jsfiddle.net/bahanson/xvL2qvx0/5/

possible duplicate of [How to center horizontally div inside parent div](http://stackoverflow.com/questions/1952256/how-to-center-horizontally-div-inside-parent-div) — MikeSmithDev, Nov 11 '14 at 17:30
If the width and height of the parent div are reduced, is there a way to automatically scale down the width and height of the child div? — bailey, Nov 11 '14 at 18:41
Here are two simple methods to center divs within divs, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 20 '15 at 15:23

score 1 · Accepted Answer · answered Nov 11 '14 at 17:33

try this :demo

#test {
    width:700px;
    height: 500px;
    background: grey;
    position:relative;
}

#BOX1 {
 margin:0 auto;
    width: 500px;
 height: 300px;
 background: lightgrey; 
 position:relative;
    z-index:1;
}

#Box2{
   width: 250px;
    height: 50px;
    background: lightblue;
    position:absolute;
    left: 125px;
    z-index:2;
}

h1 {
  font: 25px Helvetica, sans-serif;
  text-align: center;
}

<div id="test" class="tab-pane">
    
    <div id="BOX1">
  <div id="Box2"> 
        <h1> Graph Text </h1>
  </div>
  </div>
</div>

score 0 · Answer 2 · answered Nov 11 '14 at 17:32

0

Adding this to the box 1 css does what you want and will keep the child centered if the parent width changes.

left: 50%;
margin-left: -250px;

http://jsfiddle.net/xvL2qvx0/6/

If you don't need IE8 support you can just use:

left: calc(50% - 250px);

answered Nov 11 '14 at 17:32

AndrewTet

1,172
8
20

score 0 · Answer 3 · answered Nov 11 '14 at 17:33

You should read up on normal flow and CSS positioning.

http://webdesign.about.com/od/cssglossary/g/bldefnormalflow.htm

But basically, a div will always position relative to the parent div.

If you add margin: 0 auto; to a div, it should horizontally position it within the parent div

score 0 · Answer 4 · answered Nov 11 '14 at 17:35

0

#BOX1 {
    display: inline-block;
    margin-left:100px;
    width: 500px;
    height: 300px;
    background: lightgrey;  
    position:absolute;
    z-index:1;
}

use margin-left command to adjust it to the centre....

answered Nov 11 '14 at 17:35

Dipali Patil

70
11

Moob · Answer 5 · 2014-11-11T17:45:59.853

Seen as though you are using absolute positioning you can simply give it a top,right,left and bottom of 0 and use margin:auto to centre it both horizontally and vertically.

This benefits from be able to use relative (percentage) sizing if you want and there's no maths involved. Furthermore, if you later change the dimensions (maybe via a media-query for mobile devices) you don't need to recalculate messy margins or offsets - just change the size and it will be centred.

#BOX1 {
    display: block;
    width: 500px; /* it will still work if you change the size */
    height: 300px; /* the dimensions could be percentages if you like */
    background: lightgrey;  
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

http://jsfiddle.net/xvL2qvx0/7/

#test {
    width:700px;
    height: 500px;
    background: grey;
    position:relative;
}

#BOX1 {
    width: 500px;
 height: 300px;
 background: lightgrey; 
 position:absolute;
    z-index:1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

#Box2{
   width: 250px;
    height: 50px;
    background: lightblue;
    position:absolute;
    left: 125px;
    z-index:2;
}

h1 {
  font: 25px Helvetica, sans-serif;
  text-align: center;
}

<div class="tab-pane" id = "test">
    <div id="Box2"> 
        <h1> Graph Text </h1>
  </div>
    <div id="BOX1">
  </div>
</div>

Center div inside parent div

5 Answers5