中心div在父div内

Question

我试图根据父div的维度将div放在父div内。我试过使用：

display: inline-block;

因为我看到了其他的问题，这是用来中心的div，但我没有运气。

BOX1应以测试为中心

<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

试试这个:演示

​

#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>

​

Answer 2

将它添加到方框1 css中可以做您想做的事情，并且如果父宽度发生变化，则将保持子中心的中心位置。

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

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

如果不需要IE8支持，只需使用：

left: calc(50% - 250px);

Answer 3

您应该阅读正常流和CSS定位。

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

但基本上，div总是相对于父div定位。

如果将margin: 0 auto;添加到div中，则应将其水平定位在父div中。