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>

Answer 2

    Can you try this:

            <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%;
position:relative;
            }
            .innerSub1,.innerSub2,.innerSub3{
                border:1px solid #f00;
                padding:10px;
                margin:10px;
                width:100px;
    height:100px;
                position:absolute;
                margin-left:-50px; /*formula to make div center horizontal (left 50% - width/2)*/
        margin-top:-50px; /*formula to make div center vertical (top 50% - height/2)*/
            }

            </style>

在一个部门内调整多个部门

2 个答案: