My website layout completely shift top left of the

问题:

My website layout completely shift top left of the browser screen, when I zoom out from my browser?

While when I check some website, like yahoo.com and zoom out from browser. It stays in center.

回答1:

I know this question is kind of old, but maybe it can help some other people.

The layout sticks to the left

I guess your layout sticks to the left because it is not centered. If you want to center an element of the layout, you have to use the following css code:

.my_element{
  margin: 0 auto;
}

It means "0 pixel on the top and the bottom, and a same amount of pixels on the left and on the right" (horizontaly centered).

But be careful, you cannot use this "trick" if the element has no width:

.my_element{
  margin: 0 auto;
  width: 300px;
}

Here is a demo on jsfiddle. In this example, every element is centered horizontaly.

But we can do better. In this second demo, we add a wrapper that contains every element and we just have to center it.

The layout sticks to the top

If you don't want your layout to stick to the top, you just have to set a margin-top on the first div, which is the wrapper in our example:

.wrapper{
  margin-top: 20px;
}

Note that english is not my native language, if you see some mistakes, please let me know.