html - 使用 CSS 将页面内容居中

Question

我正在尝试创建一个潜在客户生成页面。当在任何浏览器尺寸上显示时，我想将页面上的所有内容居中。

我尝试使用垂直对齐中心。但这似乎不起作用。

这样做的最佳做法是什么？

score 10 · Accepted Answer

如果您只是指在左右边缘之间居中，则创建一个具有固定宽度的元素，并margin: auto;在其上声明。

如果要将元素水平和垂直居中，请将其水平和垂直放置在页面的中间，然后将其拉回元素宽度和高度的一半。

例如：

.someElement {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
}

score 3 · Accepted Answer

对我来说，最好的方法是制作一个设置宽度的容器 div。我通常选择大约 900 像素，因为现在几乎所有的显示器都比这宽。然后我使用边距自动使 div 居中。

#container { width: 900px; 
margin: 0px auto 0px auto; 
}

这将使 div 居中。鲍勃是你的叔叔。
如果你愿意，我可以发布这样的例子。

麦克风

score -1 · Accepted Answer

-1

干得好：

于 2012-08-02T09:53:38.730 回答

3 回答 3