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

Posted 2023-03-05

【中文标题】如何使用css中的绝对位置将子div定位到每个父div的中心[重复]

【英文标题】：How to position child div to the center of every parents div using position absolute in css [duplicate]

【发布时间】：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

【参考方案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 先生。我稍后会接受。