浏览器兼容性：

Question

我在div中有一个图像，我想垂直和水平居中图像，尝试不同的方法，如将容器显示为表格，将图像作为表格行等。

这里没有垂直对齐。

这是我的代码：

 <div class="container">
     <img src='images/img1.jpg' class="imgclass">
 </div>

CSS：

.container {
    width: 70%;
    min-height:400px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.container img {
    max-height: 100%;
}

Answer 1

您可以使用此absolute方法：

JSFiddle

.container {
  width: 70%;
  min-height:400px;
  overflow: hidden;
  position: relative;
}

.container img {
  max-height: 100%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

这样，您无需更改HTML的结构，无论您为元素提供什么样的高度或宽度，或者即使重新调整页面大小，也无需更改HTML的结构。

您也无需知道图像的大小。

浏览器兼容性：

Chrome，Firefox，Safari，Mobile Safari，IE8-10。

Answer 2

您可以尝试绝对居中。使用此方法，您不必更改html或了解图像的大小。

.container {
  position:relative;
  width: 70%;
  min-height:400px;
  overflow: hidden;
  text-align: center;
}
.container img {
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 max-height: 100%;
}

JSFiddle

Answer 3

更简单的解决方案是将图像作为背景图像放在div中

.container 
{
background:url('images/img1.jpg') no-repeat center center;
width: 70%;
min-height:400px;
}

您还可以使用div内的表格，纵向和横向将表格的内容对齐到中心

<div class="container">
<table>
<tr>
<td style="vertical-align:center; text-align:center;">
<img src='images/img1.jpg' class="imgclass">
</td>
</div>

Answer 4

如果您知道图像的尺寸，那么以下css将适合您：

img {
    width:250px;
    height:250px;
    margin:0 auto;
    display:block;
    margin-top:calc(50% - 125px);
    margin-top:-moz-calc(50% - 125px); /*for mozilla
    margin-top: -webkit-calc(50% - 125px); /*for webkit browsers.

}

您不需要任何特殊的容器样式。这是兼容的浏览器列表：http://caniuse.com/calc

演示：http://jsfiddle.net/lotusgodkk/GCu2D/143/

Answer 5

如果您只需要ie9 +，您可以使用变换：

.container {
  width: 70%;
  min-height:400px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.container img {
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

如果您知道图像的确切大小，则可以使用负边距而不是平移。边距将是图像大小的一半。

Answer 6

在.container内取另一个div并将图像放在其中。然后将.container div的css规则设为display:table，将display:table-cell; vertical-align:middle设为内部div将会有效。

<强> HTML

<div class="container">
    <div class="img-cont">
       <img src='http://fc08.deviantart.net/images3/i/2004/09/1/0/flower_eyes.jpg' class="imgclass">
    </div>
 </div>

<强> CSS

.container {
    width: 70%;
    min-height:400px;
    overflow: hidden;
    position: relative;
    text-align: center;
    display:table;
    background:#ccc;
}

.img-cont{
    display:table-cell;
    vertical-align:middle;
}

.container img {
    max-height: 100%;
}

这是一个小提琴http://jsfiddle.net/v22rG/

无法将图像置于div中心

6 个答案:

浏览器兼容性：