Why does padding-left:50% stop working eventually?

I want to center a div, so I write <div style="padding-left: 50%;"> test </div>. The text is centered just fine until I resize the browser to a very small size. (~300 px width). Then it starts to display a horizontal scrollbar.

Why do browsers (Chrome12, Opera11.50, Firefox5) implement that behaviour? In my mind that is simply not correct. There is no content that would need a scrollbar. How do I disable it or what else should I do to ce开发者_开发百科nter my content?

If you want to center text use text-align:center. If you want to center an element use margin:0 auto. Please provide more details about exactly what you wish to accomplish.

You can prevent the appearance of the scrollbar by modifying the overflow property.

Fixed width containers can be centered using margins. Setting the left and right margin to auto will center your div.

<div style="width:900px;margin:0 auto;">
    test
</div>