Как разместить div в середине страницы

Question

Не в середине страницы, как в поле: 0 auto; Я говорю о центре, как сверху вниз. Спасибо заранее!

Answer 1

С html5 это довольно легко с помощью Flexbox:

Этой статьи discribes как сделать это http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

и здесь дема (также из статьи) http://jsfiddle.net/pnNqd/

HTML:

<h1>OMG, I’m centered</h1> 

CSS:

html { 
    height: 100%; 
} 

body { 
    display: -webkit-box; /* OLD: Safari, iOS, Android browser, 
            older WebKit browsers. */ 
    display: -moz-box;  /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox; /* MID: IE 10 */ 
    display: -webkit-flex; /* NEW, Chrome 21+ */ 
    display: flex;  /* NEW: Opera 12.1, Firefox 22+ */ 

    -webkit-box-align: center; -moz-box-align: center; /* OLD… */ 
    -ms-flex-align: center; /* you know the drill now… */ 
    -webkit-align-items: center; 
    align-items: center; 

    -webkit-box-pack: center; -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 

    margin: 0; 
    height: 100%; 
    width: 100%; /* needed for Firefox */ 
} 

h1 { 
    display: -webkit-box; display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-box-align: center; -moz-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 

    height: 10rem; 
} 

Answer 2

Есть несколько способов:

position: absolute; 
left: 50%; 
top: 50%; 
margin-left: <50% of width from element>; 
margin-top: <50% of height from element>; 

или:

HTML

<div id="content-wrapper"> 
    <div class="wrapper"> 
     Some text 
    </div> 
</div> 

CSS

#content-wrapper { 
    display: table; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 
.wrapper { 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
} 

Примечание: Это не будет работать каждый раз. Я сделал это самостоятельно site.

Answer 3

Самый простой способ, если ваш div абсолютно расположен. Условия. Ваш DIV должен иметь фиксированную ширину и высоту

#myBox{width:50px; height: 50px; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; border:solid 1px #000;} 

См http://jsfiddle.net/zM2J2/

Положите границу, чтобы показать вам план.