41

Possible Duplicate:
How to align a <div> 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.

Community
  • 1
  • 1
mdivk
  • 3,545
  • 8
  • 53
  • 91
  • 1
    I'm assuming "Middle of the screen" means center of the browser? Also, do you need it to be centered vertically, horizontally or both? – JohnFx Jun 19 '12 at 02:28

4 Answers4

59

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:

<div></div>

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.

Zhihao
  • 14,758
  • 2
  • 26
  • 36
7

Solution for the code you posted:

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

--

How this works?

Example: 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 would your your height.
  • Y would be your width.

To position the div vertically and horizontally, divide X and Y by 2.

Charlie
  • 11,380
  • 19
  • 83
  • 138
  • A downvote? What am I missing? – Charlie Jun 19 '12 at 03:30
  • what's downvote? I am not used to this forum, maybe I accidently did something wrong? sorry if that's the case – mdivk Jun 19 '12 at 15:12
  • It might not have been you, put I updated the post with the code you posted. Also, paste the code that you posted below into the original question, instead of as an answer. – Charlie Jun 19 '12 at 15:21
  • Sorry I have to hold this post un-resolved yet, I use Kay's solution and it works almost what I want and you can see here:xiexianhui.com/baxjoomla15/index0.html, but: there are three issues: 1. spacing between the two row is too much, how to set it as 1px only? 2. The background is different than the whole page. 3. the page is not fully working with cell phone. my cell phone is sony xperia ray which has a 480 x 854 pixels screen, it doesn't show any images when browsing to the page. I guess I also need to make the image auto re-sized, can anyone tell me how to sort them out ? – mdivk Jun 20 '12 at 15:32
  • If the spacing is off, that's not because of our code. If the background is different, then change it. You never specified you wanted this to work on your phone, but if you want it to, make the `div` that's being centered ≤ 480px. Not showing images is a problem with your code, not what we've been posting. – Charlie Jun 20 '12 at 20:35
4

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

Centered horizontally and vertically

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

Kijewski
  • 25,517
  • 12
  • 101
  • 143
  • Thank you guys, almost there, kay's answer is the closest one, it gets centered horizontally but not vertically, why? Here is my code, I put everything in a single HTML file - which is what I need, thanks. – mdivk Jun 19 '12 at 13:56
  • if I type in the same URL as shown in your post: http://fiddle.jshell.net/_display/ it gives me:{"error": "Please use POST request"} – mdivk Jun 19 '12 at 15:34
  • 1
    @mdivk the picture shows the result sub-window the the linked fiddle. The canonical URL of this sub-window is http://fiddle.jshell.net/nBzcb/show/. – Kijewski Jun 19 '12 at 15:49
  • it would be great if you can post a html to fix this, please see the live demo: http://www.xiexianhui.com/baxjoomla15/index0.html, thanks, the file was created based on your source file. apparently it is not working perfectly. could you send me the working file (based on my table?) to xie3208080 gmail? thank you. – mdivk Jun 19 '12 at 17:20
  • http://jsfiddle.net/PV9pD/ ([standalone demo](http://jsfiddle.net/PV9pD/show/)) ← works. PS: The "/banners/" part of the URL of your images makes my adblocker block them. – Kijewski Jun 19 '12 at 17:46
  • One more question: if you look at http://localhost/baxjoomla15/index0.html, you will see the two problems: 1. spacing between the two row is too much, how to set it as 1px only? 2. The background is different than the whole page, how do I make it harmonized? Thank you. – mdivk Jun 19 '12 at 19:39
  • "The "/banners/" part of the URL of your images makes my adblocker block them" -- Good to know that, I will change the image location to avoid "banner", thank you. – mdivk Jun 19 '12 at 19:40
  • Just found out the page is not fully working with cell phone. my cell phone is sony xperia ray which has a 480 x 854 pixels screen, it doesn't show any images when browsing to the page. I guess I also need to make the image auto re-sized, could you tell me how? Thank you again for your kind help. – mdivk Jun 19 '12 at 19:56
0

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

See example here

Amin Mousavi
  • 668
  • 1
  • 8
  • 17