Question

＆＃13;

#first {
  position: relative;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background-color: #94b8b8;
}
#second {
  position: absolute;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  background-color: blue;
}

＆＃13;

<html>

<body>
  <div id="first">
    <div id="second">
    </div>
  </div>
</body>

</html>

＆＃13;

如何获得它我希望第二个div位于第一个div的确切中心，但它甚至都不可见。如何在不使用left，top属性的情况下实现此目的注意：我想只使用css对齐它，但不使用标记。

Answer 1

有几种可能做你想做的事：

.outer {
  background: lightblue;
  width: 300px;
  height: 100px;
}
.inner {
  background: black;
  width: 100px;
  height: 50px;
  color: white;
}

<div class="outer" align="center">
  <div class="inner">
    Deprecated (use css)
  </div>
</div>
<br>
<div class="outer">
  <div class="inner" style="position: relative; left: 50%; margin-left: -50px;">
    :)
  </div>
</div>
<br>
<div class="outer" style="position: relative">
  <div class="inner" style="position: absolute; left: 50%; margin-left: -50px;">
    :)
  </div>
</div>
<br>
<div class="outer">
  <div class="inner" style="margin: 0 auto;">
  </div>
</div>

另一种解决方案

.outer {
  width: 100%;
  text-align: center;
}

.inner {
  display: inline-block;
}

Answer 2

要将具有已知宽度的绝对定位div居中，您可以使用：

.inner1 {
  left: 0;
  right: 0;
  margin: auto;
}

或者，如果你需要水平和垂直居中：

.inner2 {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

如果内部的宽度未知 - 请使用css3转换：

.inner3 {
  left: 50%;
  transform: translateX(-50%);
  top: 0;

}

垂直居中的Ant也是：

.inner4 {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}

小提琴演示：https://jsfiddle.net/4qxpc0ua/

Answer 3

计算顶部和左侧位置并将其应用于第二个div。

   #first {
     position: relative;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     background-color: #94b8b8;
   }
   #second {
     position: absolute;
     width: 15%;
     height: 15%;
     left:42.5%; //50% - (15% / 2)
     top:42.5%; //50% - (15% / 2)
     border-radius: 50%;
     background-color: blue;
   }

DEMO

我想把一个div放在另一个div中但不工作？

3 个答案: