CODEWITHSUNDEEP
javascriptphpcsshtml
user2557358
user2557358

Reputation:

How to align a website to the center of the screen top/bottom and right/left?

I want to have the effect like dropbox:https://www.dropbox.com/ where my website is centered in the exact middle of the page.

Upvotes: 0

Views: 648

Answers (9)

Jakob Jingleheimer
Jakob Jingleheimer

Reputation: 31580

Achieving this effect is way more complicated than it should be. Here's a bare-bones working example: http://jsfiddle.net/JakobJingleheimer/UEsYM/

html, body { height: 100%; } // needed for vertical centre

html { width: 100%; } // needed for horizontal centre

body {
    display: table; // needed for vertical centre
    margin: 0 auto; // needed for horizontal centre
    width: 50%; // needed for horizontal centre
}

.main-container {
    background-color: #eee;
    display: table-cell; // needed for vertical centre
    height: 100%; // needed for vertical centre
    // overflow: auto; // <- probably a good idea
    vertical-align: middle; // needed for vertical centre
    width: 100%; // needed for horizontal centre
}

.container {
    background-color: #ccc;
    padding: 20px;
}

screenshot from JSFiddle example

Upvotes: 1

Francisco Presencia
Francisco Presencia

Reputation: 8851

If you want to achieve this:

How it looks

Here are different methods, with the pros/cons of each one, for centering a page vertically. Choose which one you prefer:

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

EDIT. As suggested, I will proceed to explain one of the methods. It only works if you already know the height/width of the element to center (the link includes more methods). Assuming all your content is within <body>, and that your content is 900px x 600px, you can do in your css:

html {
  width: 100%;
  height: 100%;
  }
body {
  width: 900px;
  height: 600px;
  position: absolute;
  top: 50%;
  margin-top: -300px; /* Half of the height of your body */
  }

However, this falls short for dynamically generated content, since you don't know the height of it. I've used it succesfully on log-in box pop-up and settings pop-up.

Another method I've used in the past for the whole page is the Method 1 from the link. It makes a set of divs to behave as a table, which can vertical-align to the middle.

Upvotes: 1

Mr. Smee
Mr. Smee

Reputation: 960

Try this:

html

<span id="forceValign"></span><!--
--><div id="centerMiddleWrap">
  <div id="centered">Hello this is some text. Hello this is some text. Hello this is some text.</div>
</div>

CSS

html {
    height: 100%;
    background: #eee;
 }
 body {
   margin: 0;
   height: 100%;
   /*important*/
   text-align: center;
 }
 #centerMiddleWrap {
  /*important*/
    display: inline-block;
    vertical-align: middle;
 }
 #forceValign {
   /*important*/
    height: 100%;
    display: inline-block;
    vertical-align: middle;
 }
#centered {
    background: #000;
    color: #fff;
    font-size: 34px;
    padding: 15px;
    max-width: 50%;
    /*important*/
    display: inline-block;
}

Here is an demo

Upvotes: 0

Ree
Ree

Reputation: 259

Wrap a div and define its width, use margin:0 auto for centering the div.

You can check a site's CSS by using Firebug or browser extensions.

Upvotes: -1

Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

<body>
   <div class="container">
     ......... your code

   </div>
</body>

#container{
  width: 700px ;
  margin:0 auto ;
  padding:0px;
}

Upvotes: 0

sush
sush

Reputation: 379

First create a main container of the desired width and then put all your code inside the main container. For Eg.

<body>
   <div id="container">
     ......... your code

   </div>
</body>

And in the css

#container{
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}

You can change the width as per your needs

Upvotes: 0

user2936213
user2936213

Reputation: 1011

On your topmost div give margin:0 auto 0 auto; Also define some width to that div.

Upvotes: 0

Voonic
Voonic

Reputation: 4775

If you know the width and height of your page then wrap your contents in following div css

.center
{
position:absolute;
top:50%;
left:50%;
margin-left: -(yourPageWidth/2);
margin-top: -(YourPageHeight/2);
}

Upvotes: 0

Chun Lin
Chun Lin

Reputation: 544

If you want to align it vertically center, please check this web page: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Upvotes: 0

Related Questions