【问题标题】：Keep images centered when resizing调整大小时保持图像居中
【发布时间】：2015-06-17 03:15:14
【问题描述】：

我想在调整浏览器大小时保持图像居中。

我正在使用以下代码，但每次调整浏览器大小时，我的图像都不会保持居中 (x/y)。它也应该适用于 IE9 及更高版本。任何帮助将不胜感激！

    .container {
    height: 580px;
    width:700px;
    margin: 0 auto;
    z-index: 1;
    overflow: hidden;
    position: relative;
    border:1px solid black;
}
.container img {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    height: 580px;
}

【问题讨论】：

喜欢这个jsfiddle.net/j08691/vx6v1b2d/1/embedded/result?

标签： css responsive-design

【解决方案1】：

垂直和水平居中元素的示例。

.container {
  display: block;
  width: 256px;
  height: 256px;
  overflow: hidden;
  background: #555;
  position: relative;
}

.container .center {
  display: block;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #999;
  text-align: center;
}

<div class="container">
  <div class="center">
    Lorem ipsum dolor
  </div>
</div>

【讨论】：

当然可以。很高兴能帮上忙；）

【解决方案2】：

您可以通过将容器定位到 top 和 left 的 50%，然后将 top/left 的负边距设置为容器大小的一半来实现。您必须将overflow:hidden 向下移动到图像容器中，如下所示：

.container {
    height: 580px;
    width:700px;
    margin: 0 auto;
    z-index: 1;
    border:1px solid black;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-290px;
    margin-left:-350px;
}
.image {
    overflow: hidden;
}
.content{
    text-align:center;
}

我还将文本 div 移到容器中，这样它也会居中。

Updated Fiddle

【讨论】：