如何水平和垂直居中 在中？

Question

我不想将 div 居中，我希望 div 的内容居中。我想要水平和垂直对齐。

抱歉，如果这太简单了或者其他什么，但这有点麻烦。

格雷

我正在使用 IE7

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/

Answer 2

我知道您说过不想将 div 居中，但使用 jquery 插件和包含要居中的元素的假 div 以跨浏览器方式实现您的要求会更容易。

我已经使用这个可以居中任何块元素的非常小的插件成功地将几乎所有内容居中。

我知道的唯一其他方法是您已经从 @simshaun & 收到的答案。 @Prhogz

编辑：根据评论请求

将脚本包含在您的头标记中

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

现在，如果您有一个想要在标记内居中的 DIV，只需将其用作

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

Answer 3

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

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

，但请访问此链接

http://www.110mb.com/forum/vertical-horizo​​ntal-alignment-of-image-within-div-t31709.0.html< /a>

Answer 4

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

对于垂直对齐，请参阅 W3 风格指南

Answer 5

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

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>

示例