Question

我有这个结构： HTML：

<div class="wrapper">
  <img src="image.jpg" />
  <div class="circle">
    X
  </div>
</div>

CSS：

.circle {
  width:50px;
  height:50px;
  border-radius:50%;
  background: #FF0000;
}

我想在div的中心放置带有类圈完全的div＆＃34;包装器＆＃34;，在给定的图像上。是否有可能只在css中执行此操作？如果没有，解决方案可以使用jQuery。

我有很多不同大小的div。

Answer 1

只需将div放在中间位置即可。只要值是硬编码，只需将其推入中心即可。确保将position: relative添加到包装器中，以便圆圈绝对定位在包装器内，而不是树中位于它上方的div。

CSS：

.wrapper {
    /* other vals */
    position: relative;
}

.circle {
    /* other vals */
    position: absolute;
    left: /* (width of wrapper - width of circle)/2 */
    top: /* (height of wrapper - height of circle)/2 */
}

Answer 2

试试这个：

Soluton 1：

.wrapper {
     position: relative;
}


.circle {
     position: absolute;
     trnasform: translate(50%, 50%);
}

Soluton 2：

 .wrapper .circle {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

解决方案3：

这已经存在 - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

这将帮助您在中间垂直和水平对齐div。

将div放在另一个带图像的div中

2 个答案: