html - 无法将图像置于 div 中

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

您可以使用此绝对 方法:

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 的结构，并且无论您为元素指定的高度或宽度如何，或者即使您调整页面大小，它也始终位于中心。

您也不必知道图像的大小。

浏览器兼容性:

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