我需要显示简单的under under contruction页面,其中有一个图像让我们说800x700px&我希望这个图像在垂直和水平方向出现在页面的中心,
我尝试了不同的方法,但没有奏效.下面的示例html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body { height: 100%; width: 100%; }
body { position: relative; background-image:url('images/bg.jpg');background-repeat:repeat; }
#mydiv {
position: absolute;
height: 100%;
width: 100%;
text-align:ceter;
}
</style>
</head>
<body>
</body>
</html>
无论长度如何,此CSS都可以使您的图像居中.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
秘密在于transform.没有它,它只会将图像的左上角像素放在中心,而不是整个图像.