完全居中一张图片？

Question

我有一个div和div内的图片，图片大小会有所不同。

我想让它水平和垂直居中。Css垂直对齐似乎不起作用。

有什么技巧吗？我可以使用php、css或Jquery

- wesbos

Answer 1

你可以通过使用某些方法来使其水平对齐。

margin: 0 auto;

垂直居中并不容易实现（至少在IE6/7中）使用CSS。使用表格相对较容易实现。

你说已经使用了jQuery，可以通过应用JavaScript来激活任何浏览器。但是当然，如果没有启用/支持JS，则页面将无法正确显示。

CSS的vertical-align属性只能在具有display: table-cell的元素内部使用（本身应该在具有display: table的元素中）。

如果您有...

<div id="container"><img src="my-image.png" alt="" /></div>

您可以使用jQuery来居中，就像plexus的建议中所示。

var imageSrc = $('#container img').attr('src');

$('#container').css({ backgroundImage: 'url(' + imageSrc + ')', backgroundPosition: 'center enter' });

- alex

---

这是一个Jquery密集型的网站，所以当JavaScript被关闭时，它看起来有点不同我并不介意。 - wesbos

Answer 2

我不知道你如何使用它，所以我的解决方案可能不适用。

当您将图像作为div的“background-image”实现时，您可以轻松地使用“background-position”将其居中：

#div {
background-image: url(./image.png);
background-position: center center;
}

- plexus

---

这是个好主意。我需要将图像链接到某个地方，但我可以使用透明的span并采用这个建议。之后会回报 :) - wesbos

Answer 3

<style>
    .image-container {
        position:relative;
        width:300px;
        height:300px;
        background:#ccc;
    }
    .image-container .image {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        background:red;
        height:100px;
        width:100px;
    }
</style>
<div class="image-container">
    <img class="image" src="****.jpg"/>
</div>

- Honnappa

---

目前你的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

请不要仅仅发布代码作为答案，还要提供解释您的代码是如何解决问题的。带有解释的答案通常更有帮助和更高质量，并且更有可能吸引赞同。 - Tyler2P