将网站水平和垂直居中答案

【问题标题】：Centering a website horizontally and vertically将网站水平和垂直居中
【发布时间】：2023-03-30 02:40:01
【问题描述】：

查看http://www.eveo.org
方便修改的下载地址：
http://www.eveo.org/backup/eveo.rar
http://www.eveo.org/backup/eveo.zip

正如你现在所看到的，它使用简单的表格方法水平和垂直居中：

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

但是，在我的文档中我没有设置文档类型，我只有：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

如果我添加如下标准文档类型：

<!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">

我的表格方法不再有效并且不起作用。因此，无论浏览器窗口大小如何，我都需要一种新的方式来使我的网页垂直和水平居中。

【问题讨论】：

见stackoverflow.com/questions/396145/…?

标签： html css

【解决方案1】：

有些跨浏览器解决方案不需要 Javascript 或黑客攻击。

一个很好的例子是here

看看this one。

对于一些学习，请查看 gtalbot 的这个优秀的 example 关于 CSS 中的水平对齐。

祝你好运>）

【讨论】：

谢谢你！垂直居中有问题。 first example 很好，但我很困惑他们如何试图为 CSS 提供版权......
对我来说不能正常工作。将其调整为小于内容的高度。

【解决方案2】：

HTML

<div id="container"></div>

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】：

你可以用 CSS/HTML 做到这一点，但如果你的高度是已知的，我将使用的方法效果最好，或者你可以使用 JavaScript 来获取高度。

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：

.container { height:500px; margin:-250px /* Half the height container */ auto; position:absolute; top:50%; width:960px; }

JavaScript (jQuery)：如果您不知道高度或它是否发生变化。

(function() {

    var $container = $('.container'),
        height = $container.outerHeight();

    $container.css({
        'marginTop': (height/2) * -1
    });

})();

【讨论】：

【解决方案4】：

有一种简单的方法可以通过内联块使用 CSS 来使页面居中：http://jsfiddle.net/CUd8G/

内容很少的时候可以使用：http://jsfiddle.net/CUd8G/1/
内容较多时：http://jsfiddle.net/CUd8G/2/
具有固定宽度（但是，它适用于未知宽度/高度）：http://jsfiddle.net/CUd8G/3/

【讨论】：

【解决方案5】：

这是您只需要在没有 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>

【讨论】：