1. First look at the effect you want to achieve
the actual
You can see that my implementation process is to use a parent div to position the horizontal vertical center, and then the parent div to locate the two cross Div.
Look at the implementation code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" ><html><head> <title></title> <style> Body{margin:0; padding:0 }/ * Position Parent div Horizontal Vertical Center * / . Body_main{ width:px ; height: px ; background-color: #3091E5 ; margin:-0 px 0 - px; top:% ;Left :% ; position: Absolute ;} / * Position Horizontal div vertically centered * / . Row_div{ width:px ; height: px ; background-color:#88E500 ; position: Absolute ; top:% ; margin:-px 0 0 0 ;} / * Position Column div Horizontal center * / . Clou_div{ width:px ; height: px ; background-color: #3c510c ;Left :% ; position: Absolute ; margin:0 0 0 -px ;} </style></head><body> <div class="Body_main"> <div class="Row_div">The horizontal div</div> <div class="Clou_div">Vertical Div.</div> </div></body></html>
CSS positioning Practice "cross" horizontal vertical center