1. Using the CSS3 's telescopic box layout
<!doctype html>{Height:400px;width:100%;Background-color:Gray;
Display:-webkit-flex;Display:Flex;flex-direction:Row;-webkit-flex-direction:Row;-webkit-justify-content:Center;justify-content:Center;-webkit-align-items:Center;Align-items:Center; }#container > Div{Height:200px;width:200px;Background-color:Red; }</style>
2.position:absolute and margin combined use
<!doctype html>{Height:400px;width:100%;Background-color:Gray;position:relative; }#container > Div{Height:200px;width:200px;Background-color:Red;position:Absolute;Top:50%; Left:50%;margin:-100px 0 0-100px; }</style>
Combined use of 3.position:absolute and Margin:auto
<!doctype html>{Height:400px;width:100%;Background-color:Gray;position:relative; }#container > Div{Height:200px;width:200px;Background-color:Red;position:Absolute;Top:0;Bottom:0; Left:0; Right:0;margin:Auto; }</style>
Several ways to align Div vertically