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/

Answer 1

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>