是否可以在div中自动将元素垂直居中？

Question

我有一个网上相册。缩略图页面是一个150px x 150px div的网格，缩略图图像设置在其中。

由于缩略图是矩形的，理想的做法是在div中自动居中。

读到这里，我想出了如何使它们水平居中。我还读到，在CSS3起飞之前，自动垂直居中是不可能的。这是真的吗？

我已经得到了水平图像自动居中，这是：

.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}

但是，垂直居中不起作用：

.landscape_t {
width: 150px;
height: auto;
display: block;
margin: auto 0 auto 0;
}

如果在CSS3之前没有办法做到这一点，那么我将不得不想出一个解决办法，但是如果我遗漏了什么，请让我知道。

提前感谢大家的帮助！

Answer 1

您有一个内联元素( <img>)，该元素位于已调整大小的父<div>元素中：

<div>
    <img />
</div>

你需要做的就是让它居中对齐。您可以在父<div>中将其与text-align:center;居中，并通过为<div>提供其全高的line-height来居中对齐。此外，由于它是一个<img>标记，您可以为该图像标记提供完成它的vertical-align:middle;，而不管它自己的大小：

​

​

Example/Demo

<style>
div {width:350px; height:350px; line-height:350px; text-align:center;}
  div img {vertical-align:middle;}​
</style>

<div>
  <img src="http://i.imgur.com/PKnWs.jpg">
</div>
<div>
  <img src="http://i.imgur.com/Az6NUl.jpg">
</div>