在页面中间居中 HTML 元素答案

【问题标题】：Centering HTML Elements in the Middle of the Page在页面中间居中 HTML 元素
【发布时间】：2012-04-27 07:12:43
【问题描述】：

我想在页面中间水平和垂直放置一个 HTML 元素，但我很难让它水平对齐。我想将 div “内容”居中。这是我的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 中，以便它可以重新调整大小，并且如果位置是相对的，则内容不会显示。

【问题讨论】：

您是否尝试将背景图片添加到#background？即background:url(images/backgroundimage.png) no-repeat center center;
甚至使用'background:url(images/backgroundimage.png) no-repeat center center;'对于#body 元素。
好点@MattSrange - 是的，如果你走背景图像路线，则不需要额外的划分。
你能把这个弄个小玩意儿吗？
How to align a <div> to the middle (horizontally/width) of the page 的可能重复项

标签： html css center

【解决方案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;
}

【讨论】：

【解决方案2】：

如果您使用 div id 背景作为背景图片，您可以使用 css 设置 div 样式，更多信息请访问w3schools 网站。

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

要使内容居中，请尝试使用我的example。

马特

【讨论】：

我把它放在一个 div 中，这样背景就可以重新调整大小。它有一个目的。
我喜欢这个例子，但我希望内容居中，没有预定义的边距，因此它是可扩展的。我最终会把内容放在中间。
你的意思是 div 元素#background 是可伸缩的吗？ Progressive.
这基本上就是我要找的，但是中间的内容不会超出页面。你能提供一个小提琴吗？
关于全尺寸渐进背景的教程可以在css-tricks找到，注意旧的浏览器可能有问题。 :P

【解决方案3】：

尽量让 padding 更大一些，padding 是屏幕边和文本/表格/图片/对象之间有多少像素。所以填充应该是，比如20-40。另外，尝试删除绝对位置；它使文本/表格/图片/对象始终位于左侧而不是中间。

【讨论】：