将网站水平和垂直居中
[英]Centering a website horizontally and vertically
问题描述
view on http://www.eveo.org
查看http://www.eveo.org
download site for easy modification:方便修改的下载地址：
http://www.eveo.org/backup/eveo.rar http://www.eveo.org/backup/eveo.rar
http://www.eveo.org/backup/eveo.zip http://www.eveo.org/backup/eveo.zip
As you can see right now, it is centered horizontally and vertically using an easy table method:正如您现在所看到的，它使用简单的表格方法水平和垂直居中：
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left">
*put anything in here and it will be aligned horizontally and vertically
</td>
</tr>
</table>
accompanying CSS:
table
{
height: 100%;
width: 100%;
vertical-align: middle;
}
However, in my document I did not set a doctype, I only have:但是，在我的文档中我没有设置文档类型，我只有：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
If I add a standard doctype such as the following:如果我添加如下标准文档类型：
<!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" lang="en" xml:lang="en">
my table method is no longer valid and does not work.我的表格方法不再有效并且不起作用。 So I need a new way to center my webpage vertically and horizontally regardless of browser window size.因此，无论浏览器 window 大小如何，我都需要一种新方法来垂直和水平居中我的网页。
5 个解决方案
解决方案1
5 已采纳 2011-08-15 12:35:26
There are some cross-browser solutions that don't require Javascript or hacking.有一些跨浏览器解决方案不需要 Javascript 或黑客攻击。
One good example is here一个很好的例子是here
Have a look also on this one.也看看这个。
For some learning, check this excellent example of gtalbot about horizonal align in CSS.对于一些学习，请查看 Gtalbot 这个关于 CSS 中水平对齐的优秀示例。
good luck >)祝你好运>）
解决方案2
3 2011-08-15 13:37:02
HTML HTML
<div id="container"></div>
CSS CSS
div#container {
width: 200px;
height: 200px;
margin-left: -100px; /* Half of width */
margin-top: -100px; /* Half of height */
position: absolute; left: 50%; top: 50%;
}
解决方案3
2 2011-08-15 12:30:07
You can do this with CSS/HTML, but the method I'm going to use will work best if your height is known, or you can use JavaScript to grab the height.您可以使用 CSS/HTML 执行此操作，但如果您的身高已知，我将使用的方法效果最好，或者您可以使用 JavaScript 来获取高度。
HTML: HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Centered Page</title>
</head>
<body>
<div class="container">
<!-- My Content will be 500px tall -->
</div>
</body>
</html>
CSS: CSS：
.container { height:500px; margin:-250px /* Half the height container */ auto; position:absolute; top:50%; width:960px; }
JavaScript (jQuery): If you don't know the height or if it changes. JavaScript (jQuery)：如果你不知道高度或者它是否改变。
(function() {
var $container = $('.container'),
height = $container.outerHeight();
$container.css({
'marginTop': (height/2) * -1
});
})();
解决方案4
0 2020-04-08 01:00:24
This is the minimum you need to do it in only html and css without javascript这是您只需要在没有 javascript 的 html 和 css 中执行的最低要求
<!doctype html><html><head><style>
table.inner{width:100%;}
table.outer{text-align:center; width:100%; height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px;}
</style></head><body>
<table class='outer' cellspacing='0px' cellpadding='0px'><tr><td></td></tr><tr><td>
<table class='inner' cellspacing='0px' cellpadding='0px'><tr><td></td></tr><tr><td>
INSPIRATIONAL
CELEBRATIONAL
MUPPETATIONAL
</td></tr><tr><td></td></tr></table>
</td></tr><tr><td></td></tr></table>
</body></html>
解决方案5
0 2011-08-15 12:54:22
There is an easy way to center a page using just CSS using inline-blocks: http://jsfiddle.net/CUd8G/有一种简单的方法可以使用 CSS 使用内联块来居中页面： http://jsfiddle.net/CUd8G/
- It works when there are a very little content: http://jsfiddle.net/CUd8G/1/当内容很少时它可以工作： http://jsfiddle.net/CUd8G/1/
- When there are a lot of content: http://jsfiddle.net/CUd8G/2/内容很多时： http://jsfiddle.net/CUd8G/2/
- With fixed width (however, it works with unknown width/height): http://jsfiddle.net/CUd8G/3/具有固定宽度（但是，它适用于未知宽度/高度）： http://jsfiddle.net/CUd8G/3/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.