如何使用css中的绝对位置将子div定位到每个父div的中心[重复]答案

【问题标题】：How to position child div to the center of every parents div using position absolute in css [duplicate]如何使用css中的绝对位置将子div定位到每个父div的中心[重复]
【发布时间】：2016-12-17 23:34:33
【问题描述】：

我很难在每个父母 div 上定位子 div。

这是css代码：

.mainDiv {
   height:500px;
   position: relative;
}

.mainDiv .parent1 {
  height: 250px;
  background-color: blue;
  top: 50px;
  position: relative;
}

.mainDiv .parent2 {
  height: 250px;
  background-color: yellow;
  position: relative;
}


.mainDiv .parent1 .sub1 {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
}

.mainDiv .parent2 .sub2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
}

这是fiddle

【问题讨论】：

标签： html css css-position vertical-alignment centering

【解决方案1】：

对子 div 使用转换，它会起作用！

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

sn-p 下面：

.mainDiv {
  height:500px;
  
  position: relative;
}

.mainDiv .parent1 {
  height: 250px;
  background-color: blue;
   position: relative;
}

.mainDiv .parent2 {
  height: 250px;
  background-color: yellow;
   position: relative;
}


.mainDiv .parent1 .sub1 {
  width: 100px;
  height: 100px;
  background-color: green;

  position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
}

.mainDiv .parent2 .sub2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div class="mainDiv">
  <div class="parent1">
    <div class="sub1">
        
    </div>
  </div>
  <div class="parent2">
    <div class="sub2">
      
    </div>
  </div>
</div>

【讨论】：

我应该删除margin-left: and margin-right: auto 吗？
是的，top 你在parent1 中也有...在答案中添加了 sn-p...
非常感谢@kukkuz 先生。我稍后会接受。