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

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

这是我在尝试将页面中的元素居中时使用的内容。每次都像魅力一样工作，特别是当你不知道元素的宽度和高度时底部的例子。