Question

如何通过CSS理想地通过CSS移动绝对位置元素而不是左上角？

我目前有一个圆形元素，我通过绝对定位进行调整。我想基于圆的中心移动它，以便我可以将它与背景上的线对齐。圆的大小是动态的，背景也是如此。试图让红色圆圈与靛蓝与灰色相遇的位置对齐。

>>> list1 =  ['ab','cd','600','4','a=7777','b=7777']
>>> list2 = ['ab', 'cd','600', '4','a=7777','b=77']
>>> c1 = Counter(list1)
>>> c2 = Counter(list2)
>>> print(c1 - c2)
Counter({'b=7777': 1})
>>> print(c2 - c1)
Counter({'b=77': 1})

https://jsfiddle.net/4akwe208/4/

以下是它的图像： https://i.stack.imgur.com/912k6.png

Answer 1

使用值为transforms的CSS translate属性。

＆＃13;

#your-div-name {
    -ms-transform: translate(-50%, 50%); /* IE 9 */
    -webkit-transform: translate(-50%, 50%); /* Safari */
    transform: translate(-50%, 50%);
}

＆＃13;

第一个值-50%控制X轴，50%表示Y轴

PS： *围绕这些值进行游戏，以获得您想要的效果。 px或%值都可以使用

Answer 2

您可以使用此calc

＆＃13;

#login-stage-goto-large {
    position: absolute;
    top: calc(20vh - 28px); // (14vh + 6vh) - (58px / 2)
    left: 90vw;
}

＆＃13;

Answer 3

根据这个问题，你想让红色圆圈到达靛蓝与灰色相遇的中心。因此，请在代码中添加以下更改。这将使圆圈从左侧开始：0，右：0和边距：自动。之后，您可以通过添加top属性来缩小圈子。

left: 0;
right: 0;
top: 4.1rem;
margin: auto

.background-p1 {
  z-index: -1000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 4vh;
  background-color: #283593;
  padding: 0;
}

.background-p2 {
  z-index: -1000;
  position: absolute;
  top: 4vh;
  left: 0;
  width: 100vw;
  height: 16vh;
  background-color: #3949ab;
  padding: 0;
}

.background-p3 {
  z-index: -1000;
  position: absolute;
  top: 20vh;
  left: 0;
  width: 100vw;
  height: 80vh;
  background-color: #eeeeee;
}

#login-stage-goto-large {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.2rem;
  margin: auto
}

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
</head>

<body>
  <div class="background-p1"></div>
  <div class="background-p2"></div>
  <div class="background-p3"></div>
  <a class="btn-floating btn-large waves-effect waves-light red" id="login-stage-goto-large"><i class="material-icons">arrow_forward</i></a>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>

Answer 4

我使用解决方案修改了上面的代码段，添加：

$(document).ready(function(){
    modPosition();
})
$(window).resize(function(){
    modPosition();
})
function modPosition(){
    var width = $('.background-p2').width();
  var padding = width-150;
    $('#login-stage-goto-large').css('left', padding);
}

<强> https://jsfiddle.net/4akwe208/33/

您可以找到涵盖所有可能的运行时修改定位的功能。

您可以将150值编辑为另一个值。

如何根据其中心绝对定位元素

4 个答案: