我有这个 html：
<div class="object-box">
<img ... />
<span class="caption">This is the caption</span>
</div>
这段 CSS 配合使用：
.object-box .caption, .object-box img {
display: block;
}
.object-box {
border: 1px solid;
}
我希望周围的div能够紧贴其内容而收缩。我可以通过使用float: ...或display: inline-block来实现这一点。但是，我也希望它以margin: auto的方式居中于页面上。这两种方法似乎不兼容。
是否可能创建这样一个紧包裹的、居中的容器，而不添加包装元素？
jsFiddle在这里
<!doctype html>
<html>
<head>
<title>ugh</title>
<style>
div#not-floated {
display:table;
margin:0 auto;
}
div#floated {
float:right;
position:relative;
right:50%;
}
div#floated-inner {
float:left;
position:relative;
left:50%;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#container { text-align: center; }
#container * { text-align: left; }
div#not-floated {
zoom: 1;
display: inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="not-floated">
<img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg"><br>
ok.
</div>
</div>
<div id="floated-container">
<div id="floated"><div id="floated-inner">
<img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg">
</div></div>
</div>
</body>
</html>
简单地说，display:table; 会导致现代浏览器中的块级元素收缩包裹，这是在现代浏览器中居中宽度不定的块级元素唯一的方法 使用 margin:0 auto;。
在IE中，只需使用父元素设置文本居中即可使您的收缩包装的display:inline 块级元素居中。
对于浮动元素，在IE中只需使用容器的50％计算即可。
几个月后，我想插一嘴。居中一个宽度未知的div是一个常见的问题，所以你可能需要创建一个可重用的解决方案。
包裹着宽度未知的div的HTML，你想要它居中：
<div class="centered-block-outer">
<div class="centered-block-middle">
<div class="centered-block-inner">
<!-- div that you'd like to center goes here -->
</div>
</div>
</div>
/* To center a block-level element of unknown width */
.centered-block-outer {
overflow: hidden;
position: relative;/* ie7 needs position:relative here*/
}
.centered-block-middle {
float: left;
position:relative;
left:50%;
}
.centered-block-inner {
position:relative;
left:-50%;
}
overflow: hidden 更改为 overflow: visible。 - chimhttps://www.w3.org/TR/css-flexbox-1/
尝试按照以下方式进行操作：<html>
<head>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
.object-box {
border: 1px solid;
}
</style>
</head>
<body>
<div class="object-box">
<img ... />
<span class="caption">This is the caption</span>
</div>
</body>
</html>
<html>
<head>
<title>TEST!</title>
<style type="text/css">
.object-box-wrapper{width:100%;text-align:center;}
.object-box {
border: 1px solid;
text-align:left;
}
</style>
</head>
<body>
<div class="object-box-wrapper">
<span class="object-box">
<span class="caption">This is the caption</span>
</span>
</div>
</body>
</html>
text-align:center。 - NXTBoy应该可以用类似这样的代码
HTML：
<msgbox>
<p>
foo
</p>
</msgbox>
以及CSS：
msgbox {
width: 100%;
display: block;
text-align: center;
}
p {
display: inline-block;
}
唯一令人遗憾的是，当使用绝对定位时，msgbox元素会阻止通过它进行点击（但这只是一个相关问题，可能不是您的问题）
position:absolute和left:50%。 thewidth = $('#thephoto').width();
theheight = $('#thephoto').height();
$('#thephoto').css("margin-top",250-(theheight/2));
$('#thephoto').css("margin-left",287.5-(thewidth/2));
$('#thephoto').fadeIn(300);
这就是我Flash背景的好处 :)
display: center;、position: center或者某些其他选项本应该成为内置的单属性选项。 - Nick Craver