如何将页面内容设置到屏幕中间？
如何将页面内容设置到屏幕中间？
提问于 2012-06-19 10:25:38
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-06-19 10:42:00
我猜你想让框在垂直和水平方向上居中，而不管浏览器窗口的大小。由于长方体的宽度和高度是固定的，因此应该可以这样做：
标记：
<div></div>CSS:
div {
height: 200px;
width: 400px;
background: black;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}即使您调整了浏览器的大小，div也应该保持在屏幕的中心。只需将页边距-顶部和边距-左侧替换为表格高度和宽度的一半。
编辑:归功于CSS-Tricks，我最初的想法就是在这里得到的。
Stack Overflow用户
发布于 2012-06-19 11:20:36
您发布的代码的解决方案：
.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>--
这是如何工作的？
<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;
}你的height.
- Y将是你的宽度。
要垂直和水平放置div，请将X和Y除以2。
Stack Overflow用户
发布于 2012-06-19 10:59:21
如果你想让内容水平和垂直居中，但又不知道你的页面会有多高，你必须使用JavaScript。
HTML：
<body>
<div id="content">...</div>
</body>CSS：
#content {
max-width: 1000px;
margin: auto;
left: 1%;
right: 1%;
position: absolute;
}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();
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11093603
复制相关文章
相似问题