html - 在一个部门内对齐多个部门

Question

我需要在我的主 DIV divBig 中水平和垂直对齐多个 DIV。每个 DIV 应相互重叠，但应位于主 DIV divBig 的中心。

这是我的 DIV 结构:

<div id="divBig">
   <div class="divBigInner">
     <img class="innerSub1" src="image.png" />
     <div class="innerSub2"></div>
     <div class="innerSub3"></div>
   </div>
</div>

到目前为止，这是我尝试过的。但是没有正确对齐。

#divBig {
    background-color: #ff6600;
    text-align: center;
}
.divBigInner{
    position:relative;
    height: 100%;
}
.innerSub1{
    position:absolute;
    max-width:550px;
    width:100%;
    z-index: 1;
    margin: auto;
    pointer-events: none;
}
.innerSub2{
    position:absolute;
    z-index: 2;
    top:10px;
    display:inline;
}
.innerSub3{
    position:relative;
    max-width:550px;
    width:100%;
    z-index:0;
    margin: auto;
    pointer-events: none;
}

谢谢。

Answer 1

你是这样问的吗？

<div id="divBig">
   <div class="divBigInner" align="center">
     <div class="innerSub1"></div>
     <div class="innerSub2"></div>
     <div class="innerSub3"></div>
   </div>
</div>

CSS

<style>
#divBig {
    background-color: #fff;
    text-align: center;
}
.divBigInner{
    height: 100%;
}
.innerSub1,.innerSub2,.innerSub3{
    border:1px solid #f00;
    padding:10px;
    margin:10px;
    width:100px;
}

</style>