2

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

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

我的 CSS 看起来像：

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

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

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

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

4

5 回答 5

4

水平居中非常容易。利用

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

或者：

margin: 0 auto;

垂直居中有点困难，并且很大程度上取决于 div 周围的其他元素。有关一些提示，请参阅本文。

于 2013-03-16T05:20:21.733 回答
4

此模式的最简单版本。

 .center-block
 {     
      margin: 0 auto
 }
于 2013-03-16T05:21:41.557 回答
3

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

例如（jsFiddle 演示）：

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;
}
于 2013-03-16T05:41:17.367 回答
1

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

使用 jQuery 的JSFiddle 演示（动态设置边距）。

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');
于 2013-03-16T05:44:18.380 回答
0

使页面的 div 居中。必须设置宽度属性。

.center{
   background:red;
   margin: 0 auto;
   width:500px;
}
于 2013-03-16T05:26:17.700 回答