html - 将图片对齐到垂直中间和水平居中

Question

我有以下 jsfiddle我试图让黑盒子里的猫的照片在中心和中间完美对齐，这样如果它不能完全适合容器内部，图像周围就会有黑色边框。我尝试了几种不同的方法，使用 line-height:100px 和 vertical-align:middle 也 text-align:middle 但似乎没有开始工作。

Answer 1

在这些场景中，当包含元素的宽度/高度已知时，我使用 position absolute 和 margin auto。给包含元素相对位置并使图像绝对化。 margin: auto 将强制图像显示在绝对中心。

.photoContainer img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

参见 fiddle http://jsfiddle.net/Pv8uN/1/