Question

可能重复：
How to center div horizontally and vertically

我需要将图像放在html页面的中心，纵向和横向......尝试了一些东西，但似乎工作正常。为了得到我使用的水平对齐 <body style="text-align:center">

它工作正常，但垂直对齐怎么办？

问候

Answer 1

如果：

X是图像宽度，
Y是图像高度，

然后：

img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -(X/2)px;
    margin-top: -(Y/2)px;
}

但请记住，只有当您网站上的唯一元素是此图片时，此解决方案才有效。我想这就是这种情况。

使用此方法可为您带来流动性。某人的屏幕有多大（或小）并不重要。图像将始终位于中间。

Answer 2

将图像放入容器div中，然后使用以下CSS（更改尺寸以适合您的图像。

.imageContainer{
        position: absolute;
        width: 100px; /*the image width*/
        height: 100px; /*the image height*/
        left: 50%;
        top: 50%;
        margin-left: -50px; /*half the image width*/
        margin-top: -50px; /*half the image height*/
    }

Answer 3

嘿，现在你可以提供身体背景图片

并设置background-position:center center;

就像这样

body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}

Answer 4

根据你想要的效果，有很多不同的选择。克里斯·科伊尔（Chris Coyier）就是这样做的。值得一读：

http://css-tricks.com/perfect-full-page-background-image/

如何将图像放在html页面的中心？

4 个答案: