How to set page content to the middle of screen

Question

Possible Duplicate    How to align a  lt div gt  to the middle of the page       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

User · Answer

HTML   lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Center lt  title gt               lt  head gt       lt body gt           lt div id  main body  gt            some text          lt  div gt       lt  body gt   lt  html gt    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            See example here

User · Answer

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    lt div gt  lt  div gt    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   Edit  Credit goes to CSS-Tricks  where I got the original idea

User · Answer

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.

HTML:

<body>
    <div id="content">...</div>
</body>

CSS:

#content {
    max-width: 1000px;
    margin: auto;
    left: 1%;
    right: 1%;
    position: absolute;
}

JavaScript (using 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();
});

Demo: http://jsfiddle.net/nBzcb/

User · Answer

Solution for the code you posted    center      position absolute      width 780px      height 650px      left 50       top 50       margin-left -390px      margin-top -325px      lt table class  center  width  780  border  0  align  center  cellspacing  2  bordercolor   000000  bgcolor   FFCC66  gt         lt tr gt           lt td gt           lt table width  100   border  0  gt         lt tr gt           lt td gt           lt table width  100   border  0  gt           lt tr gt               lt td width  150  gt  lt img src  images banners BAX Company jpg  width  149  height  130    gt  lt  td gt               lt td width  150  gt  lt img src  images banners BAX Location jpg  width  149  height  130    gt  lt  td gt               lt td width  300  gt  lt img src  images banners Closet jpg  width  300  height  130    gt  lt  td gt               lt td width  150  gt  lt img src  images banners BAX Company jpg  width  149  height  130    gt  lt  td gt               lt td width  150  gt  lt img src  images banners BAX Location jpg  width  149  height  130    gt  lt  td gt                   lt  tr gt           lt  table gt           lt  td gt         lt  tr gt         lt tr gt           lt td gt           lt table width  100   border  0  gt           lt tr gt               lt td width  150  gt  lt img src  images banners BAX Company jpg  width  149  height  130    gt  lt  td gt               lt td width  150  gt  lt img src  images banners BAX Location jpg  width  149  height  130    gt  lt  td gt               lt td width  300  gt  lt img src  images banners Closet jpg  width  300  height  130    gt  lt  td gt               lt td width  150  gt  lt img src  images banners BAX Company jpg  width  149  height  130    gt  lt  td gt               lt td width  150  gt  lt img src  images banners BAX Location jpg  width  149  height  130    gt  lt  td gt                   lt  tr gt           lt  table gt           lt  td gt         lt  tr gt   lt  table gt    --  How this works   Example  http   jsfiddle net 953Yj    lt div class  center  gt      Lorem ipsum  lt  div gt    center      position absolute      height  X px      width  Y px      left 50       top 50       margin-top - X 2 px      margin-left - Y 2 px       X would your your height  Y would be your width    To position the div vertically and horizontally  divide X and Y by 2

[html] How to set page content to the middle of screen?

The answer is

Examples related to html

Examples related to css

Tags