如何将页面内容设置到屏幕中间？ [复制]答案

【问题标题】：How to set page content to the middle of screen? [duplicate]如何将页面内容设置到屏幕中间？ [复制]
【发布时间】：2012-06-21 01:23:03
【问题描述】：

可能重复：
How to align a <div> to the middle of the page

我需要将网页的内容显示在屏幕中间，无论屏幕大小，大小，分辨率高或低，它总是自动调整到屏幕中间。

【问题讨论】：

我假设“屏幕中间”是指浏览器的中心？另外，您需要垂直居中、水平居中还是两者兼而有之？

标签： html css

【解决方案1】：

我猜您想使框在垂直和水平方向居中，而不管浏览器窗口大小。由于您有固定的盒子宽度和高度，这应该可以工作：

标记：

<div></div>

CSS：

div {
    height: 200px;
    width: 400px;
    background: black;

    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

即使您调整浏览器的大小，该 div 也应该保持在屏幕的中心。只需将 margin-top 和 margin-left 替换为表格高度和宽度的一半即可。

编辑：感谢CSS-Tricks，我从那里得到了最初的想法。

【讨论】：

没有 CSS 你能做到吗？
进入身体内部还是外部？
@user1807271 不确定我是否理解，但<div>s 应该将您想要居中的内容包含在文档正文中。这个答案现在也有点过时了。使用 CSS3 flexbox 使事物居中更容易。

【解决方案2】：

您发布的代码的解决方案：

.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>

这是如何工作的？

示例：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;
}

X 你的身高。
Y 将是您的宽度。

要垂直和水平定位div，请将X和Y除以2。

【讨论】：

投反对票？我错过了什么？
什么是反对票？我不习惯这个论坛，也许我不小心做错了什么？对不起，如果是这样的话
可能不是你，我用你发布的代码更新了帖子。此外，将您在下面发布的代码粘贴到原始问题中，而不是作为答案。
对不起，我不得不保留这个帖子未解决，我使用 Kay 的解决方案，它几乎可以满足我的要求，你可以在这里看到：xiexianhui.com/baxjoomla15/index0.html，但是：那里是三个问题： 1. 两行间距太大，怎么设置为只有1px？ 2.背景与整个页面不同。 3. 页面不能完全用手机操作。我的手机是索尼 xperia ray，屏幕为 480 x 854 像素，浏览页面时不显示任何图像。我想我还需要使图像自动调整大小，谁能告诉我如何整理它们？
如果间距关闭，那不是因为我们的代码。如果背景不同，则更改它。你从来没有指定你想让它在你的手机上工作，但如果你愿意，让div居中≤480px。不显示图像是您的代码的问题，而不是我们发布的问题。

【解决方案3】：

如果您想将内容水平和垂直居中，但事先不知道页面的高度，则必须使用 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();
});

演示：http://jsfiddle.net/nBzcb/

【讨论】：

谢谢你们，差不多了，凯的答案是最接近的，它水平居中而不是垂直居中，为什么？这是我的代码，我将所有内容都放在了一个 HTML 文件中——这正是我所需要的，谢谢。
如果我输入与您帖子中显示的相同的 URL：fiddle.jshell.net/_display 它会给我：{"error": "Please use POST request"}
@mdivk 图片显示了链接小提琴的结果子窗口。此子窗口的规范 URL 是 fiddle.jshell.net/nBzcb/show。
如果你能发布一个 html 来解决这个问题那就太好了，请看现场演示：xiexianhui.com/baxjoomla15/index0.html，谢谢，该文件是根据你的源文件创建的。显然它工作不完美。你能把工作文件（基于我的表吗？）发给 xie3208080 gmail 吗？谢谢。
jsfiddle.net/PV9pD (standalone demo) ← 有效。 PS：您的图片 URL 的“/banners/”部分使我的广告拦截器阻止了它们。

【解决方案4】：

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Center</title>        
    </head>
    <body>
        <div id="main_body">
          some text
        </div>
    </body>
</html>

CSS

body
{
   width: 100%;
   Height: 100%;
}
#main_body
{
    background: #ff3333;
    width: 200px;
    position: absolute;
}

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" });
});

参见示例here

【讨论】：

谢谢。不工作，桌子放在左上角
对不起。我没有测试旧版本。使用新版本。