html - 如何将此响应式图像垂直和水平居中？

Question

好吧，我尝试使用 vertical-align 和 text-align 属性将此响应图像居中，但没有成功。有人可以告诉我我做错了什么。我希望图像在页面中间垂直和水平。

<div class="circle">
     <div class="bl-circle" style="z-index:9999;">
          <a href="http://www.leedsrush.com"><img src="images/Circular.png" onmouseover="this.src='images/leeds.png'" onmouseout="this.src='images/Circular.png'" style="width:100%; height:100%;"/>
          </a>
      </div>
</div>

.bl-circle{
    position: absolute;
    max-width:250px;
    max-height:250px;
    height:100%;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

.circle{


}

Answer 1

我会查看本教程:

http://pmob.co.uk/pob/hoz-vert-center.htm

这就是我在尝试使页面中的元素居中时使用的方法。每次都像魅力一样工作，尤其是当您不知道元素的宽度和高度时底部的示例。