将具有未知宽度和高度的 div 居中对齐的最佳方法？答案

【问题标题】：Best way to center align a div with unknown width and height?将具有未知宽度和高度的 div 居中对齐的最佳方法？
【发布时间】：2013-03-16 05:18:46
【问题描述】：

假设我的页面上有一个 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（比如每个 300 像素），我会将 margin-left 和 margin-top 值设置为该值的一半（均为 -150 像素）

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

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

【问题讨论】：

如果你的意思是水平和垂直：css-tricks.com/snippets/css/…
使用一点 jQuery，这变得非常容易。 jQuery 是一种选择吗？
只有 IE5/6/7 支持 CSS 表达式。它们自 IE8 起已停止使用，并且从未被非 IE 浏览器支持。

标签： html css css-expressions

【解决方案1】：

此模式的最简单版本。

 .center-block
 {     
      margin: 0 auto
 }

【讨论】：

这是一个 jsfiddle jsfiddle.net/rjY7F/482，如果有多个元素需要居中而不考虑屏幕大小，它也可以工作。（问题是只有一个元素的情况）
你只是在重复我们都知道行不通的事情，甚至作者也承认这行不通。这没有回答任何问题。在 cmets 的示例中，您正在设置显式宽度。如果问题的作者知道宽度，就永远不会问这个问题。这个答案根本没有帮助。

【解决方案2】：

水平居中非常容易。使用

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

或者：

margin: 0 auto;

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

【讨论】：

我没有任何容器元素....只是 div 居中...所以我不想使用自动技术...
@testndtv 为什么不呢？这是迄今为止最简单的方法。
@MattCoughlin 它也适用于比例宽度。这是example
澄清：margin: auto 仅适用于显式（非自动）宽度（长度值，例如 px、em 或 %）。在这种情况下，没有明确的宽度。
@MattCoughlin 点。我在回答中包含了一个注释

【解决方案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;
}

【讨论】：

【解决方案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');

【讨论】：

【解决方案5】：

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

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

【讨论】：