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

So, I have the div with these parameters:

所以,我有这些参数的div:

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

It contains the image with unknown size (the size is dinamic and it may be different).

它包含未知大小的图像(大小是dinamic,它可能是不同的)。

I need to align the image vertically and horizontally.

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

Please, help

6 个解决方案

#1

The background image method will work, with background-position:center center, unfortunately you'll lose control of scaling your image.

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

You can set your image as follows:

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

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

PS. Keep in mind that this will be centered relative to its closest positioned parent.

PS。请记住,这将相对于其最接近的父母居中。

#2

Add the following:

添加以下内容:

The first two lines center it vertically, the last horizontally.

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

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

more info can be found here: http://www.w3.org/Style/Examples/007/center

更多信息可以在这里找到:http://www.w3.org/Style/Examples/007/center

#3

The easiest cross-browser way would be to set your dynamic image as a background property on the #container:

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

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

#4

This will center vertically and horizontally.

这将垂直和水平居中。

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

http://jsfiddle.net/nfBDT/

#5

i believe the easiest way is to do this:

我相信最简单的方法是这样做:

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

adjust .container to suit your div (not sure if yours was a class or ID)

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

oh I didn't read all of your question.

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

this appears to work:

这似乎工作:

<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]-->

full credit: http://www.brunildo.org/test/img_center.html

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

#6

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

This is a pretty decent example. Usually you use table/vertical-align for modern browsers and positioning+%s for IE.

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

#1