Refer to Http://www.cnblogs.com/yugege/p/5246652.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Index</title> <style>Html,body{width:100%;Height:100%;margin:0;padding:0; }. Content{width:300px;Height:300px;background:Orange;margin:0 Auto; /*Center Horizontally*/position:relative; /*out of document Flow*/Top:50%; /*Offset*/Margin-top:-150px; } </style></Head><Body> <Divclass= "Content"></Div></Body></HTML>
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Index</title> <style>Html,body{width:100%;Height:100%;margin:0;padding:0; }. Content{width:300px;Height:300px;background:Orange;margin:0 Auto; /*Center Horizontally*/position:relative; /*out of document Flow*/Top:50%; /*Offset*/Transform:Translatey ( -50%); } </style></Head><Body> <Divclass= "Content"></Div></Body></HTML>
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Index</title> <style>Html,body{width:100%;Height:100%;margin:0;padding:0; }Body{Display:Flex;Align-items:Center; /*the element that defines the body is centered vertically*/justify-content:Center; /*defines the horizontal center of the element inside the body*/ }. Content{width:300px;Height:300px;background:Orange; } </style></Head><Body> <Divclass= "Content"></Div></Body></HTML>
HTML Vertical Center