Question

我正在尝试定位一个在每个页面/屏幕上都有绝对位置的div。

这个div是一个圆形，它需要与黑色线条居中对齐，所以圆心以交叉线的中心为中心。

我希望这是有道理的。

为了证明这一点，我创造了这个小提琴：

当我减少或增加我的浏览器尺寸时，圆圈div不再是中心，我不知道如何实现我想做的事情！

我的CSS是这样的：

.circle {
  display: block;
  width: 110px;
  height: 110px;
  /*margin: 1em auto;*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid #eee;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
  background-color:#FFF;
}

.baners{
    width: 50%;
    height: 76vw; 
    border:solid 1px #333;
    display:inline-block;
    background:#FFF;
    box-sizing: border-box;
    float: left;
    position:relative;


}

Answer 1

使用这些线将圆div居中：

transform: translate(-50%, -50%);
left:100%;
top:100%;
position:absolute;
z-index:2;

<强> jsFiddle example

在任何时候都将绝对定位的div居中在交叉线上？

1 个答案: