Margin auto goes to negative values

问题

I have problem with margin: auto - vertical centering #something { width: 97%; height: 300px; border: 1px solid red; position: absolute; top: 0; bottom: 0; margin: auto; }

This work in every modern browser - when the page (viewport) is higher then 300px, its centered vertically, but, when the page(viewport) is lower then 300px stopped it works everywhere except in firefox... In firefox run it good (maybe it is bad functionalitiy, but its logical functionality) in other browsers the top of centered element disappers in the top of viewport.

http://jsfiddle.net/LhHed/2/ Here is god example - when you resize result window, in firefox work it well, in others browsers not. Is posible tu fix it? Or its bad functionality of firefox?

EDIT: live example http://dev8.newlogic.cz

回答1:

From what I gather, you're wanting the top of the divider to display at the top of the page. This currently isn't happening because you have the position set to top:0; bottom:0;, the top property is conflicted by the bottom property, ultimately positions the divider to the bottom of the page. Simply removing the bottom property prevents the top of the element appearing outside of the viewport:

#something {
    width: 97%;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    margin: auto;
}

JSFiddle.

回答2:

I removed the problem in browsers, when i use position: relative to the body element. Now its working in firefox and in other browser too. Live example on http://dev8.newlogic.cz

来源：https://stackoverflow.com/questions/15133843/margin-auto-goes-to-negative-values

标签

html

css

margin