有没有办法使用 CSS 根据屏幕中心（水平）定位某些内容？

Question

我想知道是否有更简单的方法来做到这一点：

1. 水平放置一些东西在屏幕中央（简单）。
2. 使其位置偏离中心。

我通常通过制作一个

来实现这一点，其宽度是我想要偏移量的两倍，将其设置为 margin: auto; 然后输入我想要的此元素内的元素向左或向右浮动。这很好用，我只是想可能有更短的方法。

举个例子，我可能希望将

放置在屏幕中心左侧 80px 处，如下所示：

             

Answer 1

你可以这样做：

body { position: relative }

div {
  width: 300px;
  height: 250px;

  /* Origins from the screen center */
  position: absolute;
  top: 50%;
  left: 50%;

  margin-top: -125px; /* height / 2 */
  margin-left: -230px; /* (width / 2) - 80 */
  /* The margin left would be -150px but you want it to move 80 pixels to left */
}

这是一个在线示例： http://jsfiddle.net/B4rDJ/2/（谢谢普尔穆！）