3

我需要显示简单的施工页面，该页面有一个图像让我们说 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>
4

3 回答 3

13

无论长度如何，此 CSS 都可以使您的图像居中。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

秘密就在transform. 没有它，它只会把图像的左上角像素放在中心，而不是把整个图像漂亮地放在中间。

于 2016-05-17T23:42:15.013 回答
6

查看 Chris Coyier 关于 CSS-Tricks 的这篇文章。我认为这可能会有所帮助。几天前我遇到了同样的问题，他的回答对我有用。

水平和垂直居中图像

基本上这个想法是，如果您的图像具有设定的宽度和高度。您可以将其从左侧和顶部 50% 绝对定位，然后执行等于宽度和高度一半的负边距以使其回到死点。如果图像没有设置尺寸，它们是垂直居中图像的其他方法。

于 2013-02-05T06:45:48.340 回答
1

您没有为 div 设置 ID，我已对其进行了编辑，一旦完成，图像将水平对齐。此外， mydiv 不需要定位为“绝对”。

要垂直对齐图片，不使用 javascript 的最佳解决方案是给 img 一个带 % 的 margin-top。

#mydiv {
 text-align: center;
}

#mydiv img {
 margin-top: 15%;
}
于 2013-02-05T06:41:46.327 回答