如何垂直和水平居中这个响应式图像？答案

【问题标题】：How do I center this responsive image vertically and horizontally?如何垂直和水平居中这个响应式图像？
【发布时间】：2013-08-16 23:33:42
【问题描述】：

好的，我尝试使用 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{


}

【问题讨论】：

要使vertical-align 工作，元素需要设置display:table 或display:table-cell。但在这种情况下，如果图像占据了 100% 的高度和宽度，则无需居中。

标签： html css vertical-alignment alignment

【解决方案1】：

我会看看这个教程：

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

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

【讨论】：