Question

我想在页面中间水平和垂直放置一个HTML元素，但是我很难让它在水平方向上对齐。我想把div＆＃34;内容＆＃34;放在中心位置。这是我的css：

#background
{
position:absolute; 
width:100%; 
height:100%; 
margin:0px; 
padding:0px; 
left:0px; 
right:0px;
z-index:1;
text-align: center;
}

#content
{
margin-left: auto;
margin-right: auto;
 width: 200px;
 z-index: 2;
 position: absolute;
}

这是我的HTML：

<html>
<head>
<link REL="STYLESHEET" TYPE="text/css" HREF="style/myStyle.css"> 
</head>
<body style="padding:0px; margin:0px; overflow:hidden;"> 


 <div id="background"><img src="images/backgroundimage.png" width="100%" height="100%">

 </div>

 <div id="content">

 <p>Here is some content</p>
 </div>

</body>
</html>

由于必须将div定位为绝对值，所以：

 margin: 0 auto;

赢了工作。我不知道该怎么做。另外，我希望它垂直位于页面的中心。感谢帮助，谢谢。

编辑：我需要将背景放在一个单独的div中，以便它可以重新调整大小，并且内容不会显示该位置是否相对。

Answer 1

<html>
<body> 
 <div id="background">
 <div id="content">
  <p>Here is some content</p>
 </div>     
</div>
</body>
</html>

更好的结构，用于放置中间内容，而不使用JQuery：

#background{
background: url(images/backgroundimage.png) top no-repeat;
width:100%;
height:100%;
position:relative;
}

#content{
position:absolute;
top:50%;
left:50%;
width :200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
}

Answer 2

如果您使用div id背景作为背景图片，您可以使用css设置div的样式，在w3schools网站上提供更多信息。

理想情况下，我会使用背景图像作为body标签，而不是使用图像创建新的div。

对于定居内容，请尝试使用我的example。

马特

Answer 3

尝试使填充更高的数字，填充是屏幕一侧与文本/表格/图片/对象之间的像素数。所以填充应该像20-40一样。另外，尝试删除绝对位置;它使text / table / picture / object始终在左边而不是中间。

将HTML元素置于页面中间

3 个答案: