14

可能重复：
如何将 div 水平和垂直居中

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

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

问候

4

4 回答 4

23

如果：

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

然后：

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

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

使用这种方法可以为您带来流动性的好处。某人的屏幕有多大（或多小）并不重要。图像将始终停留在中间。

于 2012-06-26T11:20:34.317 回答
9

将您的图像放在容器 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*/
    }
于 2012-06-26T13:15:25.143 回答
2

嘿，现在你可以给身体背景图片了

并设置background-position:center center;

像这样

body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}
于 2012-06-26T11:17:10.090 回答
1

根据您要达到的效果，有许多不同的选项。克里斯·科伊尔（Chris Coyier）当时就以这种方式做了一篇文章。值得一读：

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

于 2012-06-26T13:20:17.913 回答