Html 如何将页面内容设置到屏幕中间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11093603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set page content to the middle of screen?
提问by mdivk
Possible Duplicate:
How to align a <div> to the middle of the page
可能的重复：
如何将 <div> 与页面中间对齐
I need is to show the content of a web page in the middle of the screen, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the middle of screen.
我需要的是在屏幕中间显示网页的内容，无论屏幕大小，大小，分辨率高或低，它总是自动调整到屏幕中间。
回答by Zhihao
I'm guessing you want to center the box both vertically and horizontally, regardless of browser window size. Since you have a fixed width and height for the box, this should work:
我猜您想将框垂直和水平居中，无论浏览器窗口大小如何。由于框的宽度和高度是固定的，因此应该可以：
Markup:
标记：
<div></div>
CSS:
CSS：
div {
height: 200px;
width: 400px;
background: black;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
The div should remain in the center of the screen even if you resize the browser. Just replace the margin-top and margin-left with half of the height and width of your table.
即使您调整浏览器的大小，div 也应保留在屏幕的中心。只需将 margin-top 和 margin-left 替换为表格高度和宽度的一半。
Edit: Credit goes to CSS-Tricks, where I got the original idea.
编辑：归功于CSS-Tricks，我在那里得到了最初的想法。
回答by Charlie
Solution for the code you posted:
您发布的代码的解决方案：
.center{
position:absolute;
width:780px;
height:650px;
left:50%;
top:50%;
margin-left:-390px;
margin-top:-325px;
}
<table class="center" width="780" border="0" align="center" cellspacing="2" bordercolor="#000000" bgcolor="#FFCC66">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
<td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
<td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
</tr>
</table>
</td>
</tr>
</table>
--
——
How this works?
这是如何工作的？
Example: http://jsfiddle.net/953Yj/
示例：http: //jsfiddle.net/953Yj/
<div class="center">
Lorem ipsum
</div>
.center{
position:absolute;
height: X px;
width: Y px;
left:50%;
top:50%;
margin-top:- X/2 px;
margin-left:- Y/2 px;
}
- Xwould your your height.
- Ywould be your width.
- X会是你的身高。
- Y将是您的宽度。
To position the divvertically and horizontally, divide Xand Yby 2.
要div垂直和水平定位，请将X和Y除以2。
回答by kay - SE is evil
If you want to center the content horizontally and vertically, but don't know in prior how high your page will be, you have to you use JavaScript.
如果您想将内容水平和垂直居中，但事先不知道您的页面有多高，则必须使用 JavaScript。
HTML:
HTML：
<body>
<div id="content">...</div>
</body>
CSS:
CSS：
#content {
max-width: 1000px;
margin: auto;
left: 1%;
right: 1%;
position: absolute;
}
JavaScript (using jQuery):
JavaScript（使用 jQuery）：
$(function() {
$(window).on('resize', function resize() {
$(window).off('resize', resize);
setTimeout(function () {
var content = $('#content');
var top = (window.innerHeight - content.height()) / 2;
content.css('top', Math.max(0, top) + 'px');
$(window).on('resize', resize);
}, 50);
}).resize();
});
回答by Amin Mousavi
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div id="main_body">
some text
</div>
</body>
</html>
CSS
CSS
body
{
width: 100%;
Height: 100%;
}
#main_body
{
background: #ff3333;
width: 200px;
position: absolute;
}?
JS ( jQuery )
JS ( jQuery )
$(function(){
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var main = $("#main_body");
$("#main_body").css({ top: ((windowHeight / 2) - (main.height() / 2)) + "px",
left:((windowWidth / 2) - (main.width() / 2)) + "px" });
});
See example here
请参阅此处的示例
