Vertically Centering content in html [duplicate]

Answer 1

Welcome to SO!

Vertically centering a div is actually very simple.

div{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

There you have it.

Demo

You might also consider absolute centering:

div{
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Demo

Answer 2

If you want center block verticaly you can use this trick's

margin is a half of your size bloc.

If you use this you need size on your bloc.

html :

<div id="center"></div>

css :

#center{
    position:absolute;
    left:50%;
    top:50%;
    height:400px;
    width:600px;
    margin-left:-300px;
    margin-top:-200px;
}

DEMO : http://jsfiddle.net/ucbRs/

or you can also use this :

css :

#center{
    position:absolute;
    left:100px;
    top:100px;
    bottom:100px;
    right:100px;
}

DEMO : http://jsfiddle.net/ucbRs/1/

or you can also use a CSS3 property align-content like this :

body{
    display:flex;
    flex-flow: row wrap;
    align-content:center;
}
#center{
    margin:0 auto;
}

DEMO : http://jsfiddle.net/ucbRs/3/