HTML/CSS -基于页面中心指定绝对位置

Question

我给我的网站添加了一些很酷的装饰。我在CSS中使用左和右属性分配他们的职位，如下所示：

left: 32px;
position: absolute;

现在，如果用户有一个非常宽的屏幕，这些装饰的定位就会有点差。因此，我想知道，与其根据屏幕的左端或右端分配这些图像，是否可以从中间指定它们的位置，比如：

rightOfCenter: 12px;

搜查了但什么也没找到。这个特性可能不存在，但是如果它真的存在的话，它会很酷的！谢谢。

Answer 1

是的，例如，可以将左边距添加到50%，然后使用左侧属性进一步定位元素。

div {
  background: #eee;
  position: absolute;
  margin-left:50%;
  left: -50px;
  width: 100px;
  height: 100px;
}

见此处：http://jsfiddle.net/G69RK/

尝试使用left属性。所以你的rightOfCenter: 12px;现在实际上是left: 12px了。

Answer 2

您可以在屏幕中间包含一个空白div，并将后部小部件与中间div底部的填充对齐。

​

​

Answer 3

.parent{
display:flex;
width:500px;
height:500px;
}
.child{
margin:auto;
width:10px;
height:10px;

}

这将使子元素始终位于父元素的中心。如果你想把它对齐，在中心的右边做边距: auto (50%-13 50) auto；http://jsbin.com/somiw/1/edit