如何在<div>中水平垂直居中<img>?

Question

我不想让一个div居中，我希望div里的内容居中。我需要水平和垂直对齐。

抱歉，如果这太简单或者什么的话，但是这有点麻烦，要弄对它。

Grae 我正在使用IE7。

- GC_

---

我正在使用IE7，但说实话，对于这么简单的东西，你会认为它应该适用于所有浏览器。我知道它不会，但它应该是有意义的。 - GC_

你想对齐文本还是块元素？使用 text-align: center 可以使文本居中。让块级元素居中可能有些棘手。 - jwueller

我正在尝试在一个div中垂直和水平对齐一张图片。 - GC_

Answer 1

如果您知道图像的高度和宽度，可以将其绝对定位，将上/左位置设置为50％，并将上/左边距设置为图像高度/宽度的负一半。

#foo {
    position:relative; /* Ensure that this is a positioned parent */
}
#foo img {
    width:240px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-120px;
    margin-top:-100px;
}

实例演示：http://jsfiddle.net/Zd2pz/

- Phrogz

Answer 2

我知道你说过不想让div居中，但为了跨浏览器实现你的要求，使用一个jQuery插件和一个包含要居中元素的虚拟div会更容易。

我已经成功地使用这个 非常小的插件 居中了几乎所有的东西，它可以居中任何块级元素。

我所知道的另一种方法就是@simshaun和@Prhogz已经回答过你的方式。

编辑：根据评论请求

在head标记中包含脚本。

<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.center.min.js" )%>"></script>

现在，如果你有一个 DIV 希望在你的标记中居中显示，可以简单地将其使用如下：

$(document).ready(function() {
    $("#myDIV").center({ vertical: false });
});

- Lorenzo

---

我为你点了赞，但是请问一下如何将它插入到HTML代码中，我在jQuery方面非常薄弱。 - Mohamed Kamal

Answer 3

尽管以下内容已经过时，但它仍然适用于几乎所有浏览器。

<center>
<div>
your html
</div>
</center>

然而，请访问此链接

http://www.110mb.com/forum/vertical-horizontal-alignment-of-image-within-div-t31709.0.html

- Mohamed Kamal

Answer 4

如果您事先知道内部元素的高度，

CSS：

.container {
    text-align: center; /* Center horizontally. */

    /* For demo only */
    border: 1px solid #000;
    height: 500px;
    margin: 20px;
    width: 700px;
}

.container img {
    margin-top: -167px;
    position: relative;
    top: 50%;
}

HTML:

<div class="container">
    <img src="http://farm6.static.flickr.com/5004/5270561847_7223069d5e.jpg" width="500" height="334" alt="">
</div>

示例

- simshaun

Answer 5

水平对齐，请使用text-align:center;

垂直对齐，请参见W3样式指南等。

- Mitro

---

如果您按照W3的示例实现垂直居中，请注意谨慎。IE<=7不支持display: table-cell。 - simshaun

@simshaun 是的，这个示例在IE7兼容模式下无法在IE8中工作。 - GC_