css - 如何将元素居中但将它们显示在彼此之上

Question

有没有一种方法可以使元素的子元素水平和垂直居中，但将所有子元素显示在彼此之上，就好像它们具有 position: absolute 一样。但是没有为每个 child 独立设置样式。

<div style="widht: 100: height: 100">
  <div style="widht: 80: height: 80">
  <div style="widht: 60: height: 60">
  <div style="widht: 40: height: 40">
  <div style="widht: 20: height: 20">
</div>  

结果应该是这样的:

Answer 1

如果你不能嵌套你的 div，你可以使用 position:absolute; 和 top/left 值来定位每个 div :

DEMO

HTML :

<div class="wrap" style="width: 100px; height: 100px;">
    <div class="one" style="width: 80px; height: 80px;"></div>
    <div class="two" style="width: 60px; height: 60px;"></div>
    <div class="three" style="width: 40px; height: 40px;"></div>
    <div class="four" style="width: 20px; height: 20px;"></div>
</div>

CSS:

div {
    position:absolute;
    background:#38E1BA;
    border:5px solid #000;
}
.one{
    top:5px;
    left:5px;
}
.two{
    top:15px;
    left:15px;
}
.three{
    top:25px;
    left:25px;
}
.four{
    top:35px;
    left:35px;
}