Question

所以，我有这些参数的div：

container {
position:fixed;
background-color: rgba(50,50,50,0.7);
width:100%;
height:100%;
display:none;}

它包含图像未知大小（大小为dinamic，可能不同）。

我需要垂直和水平对齐图像。

请帮助

Answer 1

背景图像方法将起作用，背景位置：居中中心，遗憾的是您将无法控制缩放图像。

您可以按如下方式设置图像：

position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

PS。请记住，这将相对于最近的定位父级居中。

Answer 2

添加以下内容：

前两行垂直居中，最后一水平居中。

display: table-cell;
vertical-align: middle ;
text-align: center;

可在此处找到更多信息：http://www.w3.org/Style/Examples/007/center

Answer 3

最简单的跨浏览器方式是将动态图片设置为#container上的背景属性：

<div id="container" style="background: url(path/to/image.png) no-repeat 50% 50%"></div>

Answer 4

这将垂直和水平居中。

#container {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

http://jsfiddle.net/nfBDT/

Answer 5

我认为最简单的方法就是这样做：

.container img {
    display:block;
    margin:auto;
}

调整.container以适合您的div（不确定您的是否为班级或ID）

哦，我没有读完你的所有问题。

这似乎有效：

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

完全信用：http://www.brunildo.org/test/img_center.html

Answer 6

http://zoffix.com/new/absolute-center-random-width-height.html

这是一个相当不错的例子。通常你使用table / vertical-align用于现代浏览器并定位+％s用于IE。

如何将div中未知大小的图像居中？

6 个答案: