如何进行动态内容定位？

Question

你会看到很多网站的内容居中排列得很好，比如dribbble.com。即使调整了窗口的大小，内容也会保持居中，并且当内容碰到页面的一侧时会停止。

我真的很想让这个行为在我的网站上，但我真的不确定如何去CSS来实现这一点…我知道position属性和使用百分比的左/右位置，但它似乎并不是那么简单。

有人能帮我弄清楚怎么做这样的事吗？

Answer 1

标准做法是使用一个div来包装居中的内容，例如...

<div id="container">
   ...everything you want to center
</div>

在你的CSS中：

#container {
  width: 970px;
  margin: 0 auto; /*first value the margin for top and bottom, auto puts automatic margins in the left and right to center the content*/
}

Answer 2

我知道position属性和使用百分比进行左/右定位，但看起来并不是那么简单。

这更简单。

selector-that-matches-a-container {
    width: <some length>
    margin: auto;
}

Answer 3

也许可以使用这个CSS：

.content {
  position:absolute;
  left:100px;
  right:100px;
}