Question

我需要显示简单的根据构造页面，其中有一个图像让我们说800x700px＆amp;我想让这个图像垂直和放大地出现在页面的中心。水平，

我尝试了不同的方法，但没有奏效。示例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>

Answer 1

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

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

秘密在transform。没有它，它只会将图像的左上角像素放在中心，而不是整个图像。

Answer 2

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

Centering an image horizontally and vertically

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

Answer 3

你没有为div设置ID，我已经编辑过，一旦完成，图像将水平对齐。此外，mydiv不必定位于“绝对”。

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

#mydiv {
 text-align: center;
}

#mydiv img {
 margin-top: 15%;
}

中心垂直对齐图像＆amp;水平在网页上

3 个答案: