Centering a website horizontally and vertically_问答_开发者

Centering a website horizontally and vertically

开发者 https://www.devze.com 2023-03-28 17:19 出处：网络

view on http://www.eveo.org download site for easy modification: http://www.eveo.org/backup/eveo.rar http://www.eveo.org/backup/eveo.zip

相关专题：css

view on http://www.eveo.org

download site for easy modification:

http://www.eveo.org/backup/eveo.rar

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.

There are some cross-browser solutions that don't require Javascript or hacking.

One good example is here

Have a look also on this one.

For some learning, check this excellent example of gtalbot about horizonal align in CSS.

good luck >)

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

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.

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): If you don't know the height or if it changes.

(function() {

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

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

})();

There is an easy way to center a page using just CSS using inline-blocks: http://jsfiddle.net/CUd8G/

It works when there are a very little content: http://jsfiddle.net/CUd8G/1/
When there are a lot of content: http://jsfiddle.net/CUd8G/2/
With fixed width (however, it works with unknown width/height): http://jsfiddle.net/CUd8G/3/

This is the minimum you need to do it in only html and css without javascript

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