Html 父div内的中心div

我正在尝试根据父div的维度将div居中放置在父div内。我尝试使用：

display: inline-block;

因为我见过其他问题，这是用来中心分区，但我没有运气

框1应在试验中居中

<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;
}

图文
#试验{
宽度：700px；
高度：500px；
背景：灰色；
位置：相对位置；
}
#框1{
显示：内联块；
宽度：500px；
高度：300px；
背景：浅灰色；
位置：绝对位置；
z指数：1；
}
#框2{
宽度：250px；
高度：50px；
背景：浅蓝色；
位置：绝对位置；
左：125px；
z指数：2；
}
h1{
字体：25px Helvetica，无衬线；
文本对齐：居中；
}

---

将其添加到框1 css中可以满足您的需要，并且如果父项宽度发生变化，将保持子项居中

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

如果您不需要IE8支持，您可以使用：

left: calc(50% - 250px);

---

你应该阅读正常流量和CSS定位

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

如果添加

边距：0自动

对于一个div，它应该将其水平放置在父div中

#测试{
宽度：700px；
高度：500px；
背景：灰色；
位置：相对位置；
}
#框1{
保证金：0自动；
宽度：500px；
高度：300px；
背景：浅灰色；
位置：相对位置；
z指数：1；
}
#框2{
宽度：250px；
高度：50px；
背景：浅蓝色；
位置：绝对位置；
左：125px；
z指数：2；
}
h1{
字体：25px Helvetica，无衬线；
文本对齐：居中；
}

图文

#框1{
显示：内联块；
左边距：100px；
宽度：500px；
高度：300px；
背景：浅灰色；
位置：绝对位置；
z指数：1；
}

如果您使用的是绝对定位，只需将

0

的

顶部

、

右侧

、

左侧

和

底部

，然后使用

边距：自动

将其水平和垂直居中即可

这得益于如果您愿意，可以使用相对（百分比）大小，并且不涉及数学。此外，如果您以后更改尺寸（可能通过移动设备的媒体查询），则无需重新计算凌乱的边距或偏移量-只需更改尺寸，它就会居中

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

#测试{
宽度：700px；
高度：500px；
背景：灰色；
位置：相对位置；
}
#框1{
宽度：500px；
高度：300px；
背景：浅灰色；
位置：绝对位置；
z指数：1；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
}
#框2{
宽度：250px；
高度：50px；
背景：浅蓝色；
位置：绝对位置；
左：125px；
z指数：2；
}
h1{
字体：25px Helvetica，无衬线；
文本对齐：居中；
}

图文

如果父div的宽度和高度减小，是否有办法自动缩小子div的宽度和高度？以下是两种简单的方法，可以垂直、水平或同时将div居中（纯CSS）：