Html 将图像居中作为div中的链接 简单问题：将img置于div的中心：

我有一个宽度和高度给定的

div

，以及

div

内宽度和高度未知的

img

：

<style>
    div {
        width: ...;
        height: ...;
    }
</style>
<div>
    <img src="...">
</div>

以下是使用此方法对500x300

img

进行定心的几个示例：

• 在400x200

  分区中：

• 在200x400

  分区中：

难题：将

img

集中在

a

中

div

我有一个给定宽度和高度的

div

，还有一个

img

在

div

内的

a

内的宽度和高度未知：

<style>
    div {
        width: ...;
        height: ...;
    }
</style>
<div>
    <a href="...">
        <img src="...">
    </a>
</div>

以下是使用此方法对500x300

img

进行定心的几个示例：

• 在400x200

  div的
  a
  中：

• 在200x400

  div的
  a
  中：

这里的问题是，

img

之外但

div

内的空间现在可以作为链接单击

问题（tl；友好博士） 如何将

img

（未知大小）置于

div

（已知大小）的中心，同时将图像作为链接

根据评论编辑澄清/要求：

• 答案应仅为html和css（即无javascript）
• 答案不应依赖于任何框架（尽管依赖于框架的答案本身仍然很有趣，我很想看到它们，但它们不允许用于“已接受”的答案）
• 图像应保持其纵横比
• 图像应该包含在div中
  • 如果图像在任一维度上大于div，则应缩放图像，使其适合该维度
  • 否则，如果图像在任何一个维度上都不大于div，那么图像应该是以div为中心的自然大小（尽管我很想看到一个解决方案，其中图像被放大到与div紧密匹配，但它们不允许用于“接受的”答案）
• 图像外部和div内部的区域不应是链接的一部分

---

将

图像居中的简单方法

（即使它被
bootstrap using？@BashaHameed我希望答案独立于bootstrap或任何框架，但如果有答案使用bootstrap，最好也知道。与其使用
，不如尝试
。在两个示例中，只要从锚元素中删除height和width属性即可。@SunnySidhu真的……这似乎很理想。我想这可能就是它！……我会做一些严格的测试，让你知道它在哪里坏了，或者接受答案：-）很高兴我能帮助你！：）很接近，但有一个奇怪的问题。。。看起来，当我将高度（当然还有线条高度）更改为100px时，图像会稍微从div的底部溜出来（至少在chrome和firefox中是这样）。。。有什么想法吗@他们没有拆下垂直板-align@Maverick但是如果我将高度（和线高度）切换回150px，那么它就不再垂直居中；-）

<style>
    div {
        width: ...;
        height: ...;
    }
</style>
<div>
    <a href="...">
        <img src="...">
    </a>
</div>

a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}