在 FF、IE6 和 IE7 中工作的 HTML 中垂直和水平居中的实用解决方案
Posted
技术标签:
【中文标题】在 FF、IE6 和 IE7 中工作的 HTML 中垂直和水平居中的实用解决方案【英文标题】：Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7 【发布时间】：2010-09-08 03:21:33 【问题描述】：在 Firefox、IE6 和 IE7 中有效的 html 内容垂直和水平居中的实用解决方案是什么？
一些细节：
我正在寻找整个页面的解决方案。
您只需指定要居中的元素的宽度。元素的高度在设计时是未知的。
当最小化窗口时，只有在所有空白区域都消失后才会出现滚动。 也就是说，屏幕的宽度应该表示为：
"leftSpace 宽度=(screenWidth-widthOfCenteredElement)/2"+ "centeredElement 宽度=widthOfCenteredElement"+ "rightSpace 宽度=(screenWidth-widthOfCenteredElement)/2"
高度也一样：
"topSpace 高度=(screenHeight-heightOfCenteredElement)/2"+ "centeredElement 高度=heightOfCenteredElement"+ "bottomSpace 高度=(screenWidth-heightOfCenteredElement)/2"
实际上，我的意思是使用表格是可以的。我打算将此布局主要用于登录等特殊页面。所以 CSS 纯度在这里并不那么重要，而遵循标准对于未来的兼容性是可取的。【问题讨论】：
【参考方案1】：<!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>
<title>Centering</title>
<style type="text/css" media="screen">
body, html height: 100%; padding: 0px; margin: 0px;
#outer width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;
#middle vertical-align: middle
#centered width: 280px; margin-left: auto; margin-right: auto; text-align:center;
</style>
</head>
<body>
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered" style="border: 1px solid green;">
Centered content
</div>
</td></tr>
</table>
</body>
</html>
community.contractwebdevelopment.com 的解决方案也不错。如果您知道需要居中的内容的高度似乎会更好。
【讨论】：
【参考方案2】：对于水平：
<style>
body
text-align:left;
.MainBlockElement
text-align:center;
margin: 0 auto;
</style>
您需要正文中的 text-align:left 来修复 IE 呈现的错误。
【讨论】：
【参考方案3】：这是您想要完成的任务吗？如果不是，请解释与下图有什么不同？
【讨论】：
这不是我通常想要的。居中的内容应该是固定大小（以像素为单位），而不仅仅是屏幕的 50%。我通过指定内容的宽度来修复它。并寻找不指定固定高度的解决方案。所以这个布局可以用于不同但相同宽度的东西。 这将导致当您调整窗口大小时，您的内容将始终保持相同大小，但居中。【参考方案4】：来自http://www.webmonkey.com/codelibrary/Center_a_DIV
#horizon
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block
#content
width: 250px;
height: 70px;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
visibility: visible
<div id="horizon">
<div id="content">
<p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
</div><!-- closes content-->
</div><!-- closes horizon-->
【讨论】：
【参考方案5】：对于这个问题你可以使用这个样式
#yourElement
margin:0 auto;
min-width:500px;
【讨论】：
以上是关于在 FF、IE6 和 IE7 中工作的 HTML 中垂直和水平居中的实用解决方案的主要内容，如果未能解决你的问题，请参考以下文章
在 Chrome 中工作的 SVG 上 CSS 动画的 transform-origin，而不是 FF