自动垂直对齐任何自动调整大小的图像

Question

我找不到不是固定图像尺寸的答案，所以我要问它。

我有一个 div，里面有一张图片，这张图片可以是任意大小。我需要它自动缩放和自动对齐。我可以很好地缩放它，但垂直对齐它有点挑战。我需要它垂直居中对齐。

HTML + CSS

<div id="myDiv">
 <img src="./img/example.png"></img>
</div>


#myDiv {
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0%;
 left: 0%;
 text-align: center;
}

#myDiv img {
 height: auto;
 width: auto;
 max-height: 70%;
 max-width: 70%
}

Answer 1

此示例强制框内图像的水平和垂直对齐；在这种特定情况下，限制为 130x130px。在 css 中的 2 个不同位置更改定义为 130px 的宽度和高度，以更改约束大小。

[编辑：添加了显示最低要求设置的简化示例]

简化示例：

html:

<div class="pic">
  <img src="/path/to/pic.jpg"/>
</div>

css:

.pic {
    display: inline-block;
    width: 130px;
    height: 130px;
    outline: solid 1px #cccce3;
    font-size: 0;
    text-align: center;
}

.pic:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.pic img {
    max-width: 130px;
    max-height: 130px;
    display: inline-block;
    vertical-align: middle;
}

完整示例：

显示更复杂示例的原始代码笔：http://codepen.io/anon/pen/culvD。

这是html：

<ul class="pics">
  <li>
    <div class="pic">
      <img src="/path/to/pic1.jpg"/>
    </div>
  </li>
  <li>
    <div class="pic">
      <img src="/path/to/pic2.jpg"/>
    </div>
  </li>
</ul>

这是css：

ul.pics {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

ul.pics li {
    display: inline-block;
    width: 130px;
    margin: 4px;
    padding: 6px;
    background-color: #e6e6ec;
    outline: solid 1px #cccce3;
}

ul.pics li .pic {
    height: 130px;
    font-size: 0;
    text-align: center;
}

ul.pics li .pic:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

ul.pics li img {
    max-width: 130px;
    max-height: 130px;
    display: inline-block;
    vertical-align: middle;
}

Answer 2

将一个元素居中对齐到中心为其指定一个宽度，然后为 auto 设置 margin-left 和 right。