css - 另一个div图像中心的css div

Question

我有以下 HTML 代码：

    <div id="inner">
    <div id="wrap">
      <img src="images/thumb/3.jpeg"/> 
      </div>
 </div>

并应用了以下样式：

body{

    background:url(pattern/pattern1.png);
}
#inner{
    margin:0 auto;
    position:relative;
    height:400px;
    width:400px;
    background:#669;
    text-align:center;
}

#wrap{

    width:50%;

    margin:0 auto;

}

问题是图像始终保持在内部 div 的顶部居中，但我希望它位于环绕的中心

!------------------------------------------------- ------------------------- 仍然是同样的问题，这是 jsfiddle 中的代码：http: //jsfiddle.net/RNhvz/

Answer 1

你margin: 0 auto是你问题的一部分。

你知道你的图像的高度吗？我认为它低于 400 像素。0将您的样式更改为margin400 和图像高度之间差异的一半。

例如，如果您的图像高度为 200 像素，请将您的margin样式更改为：

margin: 100px auto

(400 - 200) / 2 = 100

Answer 2

您应该将边距直接应用于图像元素：JSFiddle example1

Answer 3

如果你的 #inner 总是有 400px 的高度，那么只需使用以下代码：

#inner{
    /* Your code: */
    margin:0 auto;
    position:relative;
    height:400px;
    width:400px;
    background:#669;
    text-align:center;

    /* Solution part I. */
    line-height: 400px;
}

/* Solution part II. */
img {
    margin: 0 auto;
    vertical-align: middle; 
}

这样，图像将在垂直和水平方向居中，而且 - 更重要的是 - 此解决方案不需要您知道图像大小。而且你不需要#wrap div。您可以保留 HTML 语法，但不需要此元素的宽度和边距规则。

这是工作代码：http ://tinkerbin.com/YOjVvnVZ 。