如何用 CSS 在页面中央制作一些东西？

Question

可能的重复：
如何使用 CSS 将其置于中心？

我已经很努力地尝试将东西放在 CSS 的中心，但我就是不明白！

我不想使用

那么它还能怎么做呢？

Answer 1

那么编写

最简单、最接近的选项是什么？

可能是这样的：

element {
    display:block;
    text-align:center;
}

参考文献：

• Google Chrome 样式表：http://codesearch.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css

  <前><代码>中心{
  显示：块；
  /* 特殊居中能够模拟 html4/netscape 行为 */
  文本对齐：-webkit-center
  }

• Firefox 样式表： http://mxr.mozilla.org/mozilla-central/source /layout/style/html.css

  <前><代码>中心{
  显示：块；
  文本对齐：-moz-center；
  }

为什么不使用 标签

• 这是一个“展示性”标签，绝对具有没有语义 价值。
• 它已被弃用。虽然对它的支持可能会继续，但不能保证（这取决于浏览器供应商）。

• 作为展示标签，必须执行以下操作毫无意义：

  <前><代码>中心{
  文本对齐：左对齐；
  }

如果可能（即几乎总是），表示应该始终委托给 CSS。

有多种方法可以以不同的方式“居中”不同的事物，但这应该模拟

标签的行为。

Answer 2

使用 margin-left:auto;margin-right:auto;

Answer 3

在屏幕居中显示元素的一个快速技巧是使用负边距和绝对定位。

一个例子：
- 我们需要在屏幕居中显示一个 500x200 的 div
- html

这是内容
- CSS
.center { 宽度：500px;高度：200px；位置：绝对；顶部：50%；左：50%；左边距：-250px；顶部边距：-100px }

Answer 4

http://jsfiddle.net/BxyVb/

或者如果你也想按 y 轴居中，那么只需使用以百分比值表示的边距顶部，以便在小屏幕和大屏幕上都能看到