你如何在CSS的页面中心做些什么？

Question

  

可能重复：
  How is this put in the center using CSS?

我已经非常努力地把东西放在CSS的中心，但我只是不明白！

我不想使用<center></center>

那怎么办呢？

Answer 1

  

那么写<center></center>？

的EASIEST，CLOSEST选项是什么？

可能是这样的：

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

  center {
      display: block;
      /* special centering to be able to emulate the html4/netscape behaviour */
      text-align: -webkit-center
  }
  

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

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

为什么不使用<center>标记

• 这是一个“表达”标签，绝对没有语义价值。
• 不推荐使用。虽然对它的支持可能会继续，但不能保证（这取决于浏览器供应商）。

• 作为表现标签，必须做以下事情是没有意义的：

  center {
      text-align:left;
  }
  

在可能的情况下（即几乎总是），应始终将演示文稿委托给CSS。

有多种方法可以以不同的方式“集中”不同的事物，但这应该模仿<center>标记行为。

Answer 2

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

Answer 3

显示以屏幕为中心的元素的快速技巧是使用负边距和绝对定位。

一个例子：
- 我们需要在屏幕上显示以500x200为中心的div - html <div id='center'>this is the content</div>
- css
.center { width: 500px; height: 200px; position:absolute; top:50%; left:50%; margin-left: -250px; margin-top: -100px }

Answer 4

http://jsfiddle.net/BxyVb/

或者如果你想用y轴居中，那么只需在％值中使用边距顶部，这样就可以在小屏幕和大屏幕上看到它