Question

说我的页面上有一个div：

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

我的CSS看起来像：

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

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

但我的问题是，如果.center div的宽度/高度未知（或者说它是动态的），我该如何设置这些值？

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

Answer 1

水平居中很容易。使用

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

或者：

margin: 0 auto;

要垂直居中，这有点困难，并且很大程度上取决于你的div周围的其他元素。有关指示，请参阅this article。

Answer 2

此模式的最简单版本。

 .center-block
 {     
      margin: 0 auto
 }

Answer 3

如果您的div没有固定的大小，不幸的是唯一的方法是使用javascript。

例如(jsFiddle Demo)：

的Javascript（jQuery的）

var $container = $('#centered');

var mLeft = $container.outerWidth() / 2;
var mTop = $container.outerHeight() / 2;

$container.css({
    'margin-left': -mLeft, 
    'margin-top': -mTop,
});

CSS：

html, body {
    height: 100%;
}
#centered {
    position: absolute;
    left: 50%;
    top: 50%;
    background: red;
}

Answer 4

没有明确的宽度，没有要使用的祖先元素，只有一个div，唯一剩下的选择可能是使用JavaScript或jQuery（如果这是一个选项）。

JSFiddle demo使用jQuery（动态设置边距）。

<强> CSS

.center {
    position: absolute;
    left: 50%;
    top: 50%;
}

<强>的jQuery

var leftOffset = $('.center').width() >> 1;
var topOffset = $('.center').height() >> 1;
$('.center').css('margin', '-' + topOffset + 'px 0 0 -' + leftOffset + 'px');

Answer 5

制作页面的div中心。必须设置Width属性。

.center{
   background:red;
   margin: 0 auto;
   width:500px;
}

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

5 个答案: