CSS中心技巧

Question

我最喜欢的仅使用CSS来居中xhtml元素的等式如下:

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

还有更简单的边距:支持它的浏览器中的自动方法.有没有其他人有强大的方法来强制内容显示在其容器中心？(垂直居中的奖励积分)

编辑 - 哎呀,忘了边缘左边的'负面'部分.固定.

Answer 1

div #centered{
 margin: 0 auto;
}

从我的经验来看似乎是最可靠的.

Answer 2

坚持保证金:0自动; 用于水平对齐; 如果你需要垂直对齐以及使用position:absolute; 最高:50%; margin-top: - (width/2)px; 但要注意,如果您的容器的宽度大于屏幕的宽度,则部分容器将使用Position:absolute方法从左侧的屏幕上掉落.

Answer 3

好吧,这似乎是大规模的矫枉过正,我必须说.对于现代浏览器,我倾向于将容器设置text-align:center;为旧浏览margin:auto;器,并保留它.然后在元素中重置text-align(如果它包含文本).

当然,有些东西需要设置为块,宽度需要设置......但是你究竟想要什么样的风格需要那么多的黑客攻击？

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>