Aligning multiple Divisions within a Division - html

Question

I need to align multiple DIVs horizontally and vertically inside my main DIV divBig. Each DIV should overlap one over the other but should be in the centre of the main DIV divBig.
This is my DIV structure:
<div id="divBig">
<div class="divBigInner">
<img class="innerSub1" src="image.png" />
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
This is what I tried so far. But Does not align correctly.
#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;
}
Thank you.

Answer 1

like this you are asking?
<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>