CSS center page on screen

Question

//sorry for the bad formating, i am on my phone...

When someone asks how to center a page, then the response is like:

margin-left:50%;
left:(-1/2 width);

I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit. Now the site gets centered on the smaller screen and gets equaly pushet to left and right.

So lets say, our screen is 600px wide:

200px are left
600px are on screen 
200px are right

You can scroll to the right, but the pixels on the left are unreachable...

How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens? This is especially important for mobile phones...

Solution 1

If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;

Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)

div {
  margin: 0 auto;
  width: 80%;
  height: 500px;
  background: mediumSeaGreen;
}

JSFIDDLE

Your best bet (Ignore the CSS it's from my portfolio.

.subMenu {
  display: none;
  float: none;
  width: 100%;
  background: rgba(254, 126, 1, 0.5);
  border-bottom: 5px solid rgba(0, 0, 0, 0.6);
  font-size: 20px;
  padding-left: 60%;
  position: relative;
  left: 0;
  top: 3.85em;
  list-style-type: none;
  padding: 1.5em 0;
  margin: 0;
  overflow: hidden;
}

@media only screen and (max-width: 680px) {
 .subMenu {
    top: 4.9em;
    font-size: 10px;
    min-height: 100% !important;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
  }
}

You can also use jQuery to dynamically find the width.

var width = $('div').width();

$('div').text(width);

Solution 2

You could try using margin: auto

http://jsfiddle.net/56N9w/

As you see there if you make the window too small for the content to fit it will left align by default

Solution 3

Use this:

margin: 0 auto;
width: 400px;

alternative:

margin: 0 auto;
width: 50%;

another alternative:

#outer-div {
    margin: 0 auto;
    width: 50%;
}

#inner div {
    /* insert any CSS you want here */
}

---

NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.

NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).

NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:

Centered box both horizontally and vertically:

Working in jsbin:
http://jsbin.com/OSUViFi/1/

The code (same as the jsbin above):

page.html

  <div id="outer-container">
    <div id="inner-container">
      <div id="centered-box">
      </div>
    </div>
  </div>

style.css

#outer-container {
    width: 100%;
    height: 100%;
    display: table;
    position:absolute;
    overflow: hidden;
}
#inner-container {
    display: table-cell;
    vertical-align: middle;
}
#centered-box {
    margin: 0 auto;
    height: 400px;
    width: 400px;
  background: #000;
}

---

Specific for your needs (not including vertical alignment which it looks like you don't need):

jsbin example:
http://jsbin.com/axEZOTo/2

The code (same as the jsbin above):

page.html

<div id="container">
    <div id="centered-box">
    </div>
</div>

style.css

#container {
    width: 1000px;
    margin: 0 auto;
    height: 100%;
    background: #999;
}
#centered-box {
    max-width: 70%;
    min-width: 200px;
    height: 500px;
    margin: 0 auto;
    background: #000;
}

Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.

---

NOTE:

I finally figured out what you were trying to say in your question, which was poorly worded.

You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.