image - div 中带有图像的中心 anchor

Question

我有一个位于 anchor 元素中的图像。

我希望 anchor 和图像在父 div 中垂直和水平居中。

Here举个例子:

<div class="wrapper">
    <a href="#" class="anchor">
        <img src="http://bit.ly/1mFH8AW"></img>
    </a>
</div>
.wrapper {
    background: black;
    width: 500px;
    height: 500px;
}
.anchor {
}
.anchor > img {
    height: 100px;
    width: 100px;
}

结果:

Answer 1

将 position:relative 添加到您的包装器中，然后将图像的 CSS 更改为:

.anchor > img {
    height: 100px;
    width: 100px;
    position:absolute;
    margin:auto;
    top:0;right:0;bottom:0;left:0;
}

<强> jsFiddle example