html - 图像的垂直和水平对齐

Question

我有一个占位符（正在建设中）网站，其中只有一张带有徽标的图像。我与边距水平对齐：0 auto。但是我怎么知道另外水平对齐图像。或者一句话：我如何将图像完全集中。

看这里看直播：fiddle

问候， 博多

编辑：对于 1:2（高度到宽度）图像使用：

#wrapper img
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 799px;
    height: 404px;
    margin: -202px -399px 0;
    border: 1px solid black;
}

就像在链接的线程中一样:)

感谢您的帮助

Answer 1

这会做到的

img#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
}

http://jsfiddle.net/DxByM/

Answer 2

嗯..你试过吗？

<div class='placeholder'>
   <img src='../images/myimage'>
</div>

以及该标记的 css

.placeholder
{
position : absolute;
top : 50%;
left : 50%;
width : 200px; /* Width of the image in question */
height : 200px;/* height of the image in question */
margin : -100px 0px 0px -100px;
}

这应该将您的图像带到页面的中心。

Answer 3

有一个 div 来保存具有以下规则的图像：

margin-left: auto;
margin-right: auto;
margin-top:200px;  <!-- Will depend on your image -->
width:[your-image-width]px;

将您的图像居中