中心对齐未知宽度和高度的div的最佳方法？

Question

假设我的页面上有一个div:

<div class="center"></div>

我的CSS看起来像:

.center{
    background:red;
    position:absolute;
    left:50%;
    top:50%;
    margin-left: ?
    margin-top: ?
}

正如您在上面所看到的,我唯一需要知道的是如何设置margin-left和margin-top值.如果我有一个已知的.centerdiv的宽度和高度(比如每个300px),我会设置margin-left和margin-top值为该值的一半(-150px)

但我的问题是如果.centerdiv的宽度/高度未知(或者说它是动态的),我该如何设置这些值？

我可以使用某种CSS表达式,还是有跨浏览器限制？最好的方法是什么？

Answer 1

水平居中很容易.使用

width: 50%; /* or anything other than auto */
margin-left: auto;
margin-right: auto;

或者:

margin: 0 auto;

要垂直居中,这有点困难,并且很大程度上依赖于div周围的其他元素.有关指示,请参阅此文章.