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

Question

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

Answer 1

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

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

见小提琴http://jsfiddle.net/Pv8uN/1/

Answer 2

或者如果你不想定位绝对，试试这个：

.content{
    display:inline-block;
    width:750px;
    margin-top:10px;
    margin-bottom:10px;
    height:auto;
    background-color:orange;
}

.photoContainer {
    width:200px;
    height:200px;
    background-color:#000000;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.content img {
    max-width:200px;
    max-height:200px;
    vertical-align: middle;
}

看小提琴：http: //jsfiddle.net/aAMJS/

Answer 3

没有绝对定位。

看看这个工作小提琴

添加text-align: center;到.photoContainer

.photoContainer:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -5px;
}

并添加vertical-align: middle;到.photoContainer img