position:absolute;width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px
POSITION用绝对定位是脱离文档流,,针对浏览器,
DIV左上角顶点距浏览器左边整个浏览器宽度的一半即50%
DIV左上角顶点距浏览器顶部整个浏览器高度的一半即50%
现在DIV左上角顶点在浏览器的中心位置,然后设置margin-left 往左边浏览器DIV的一半,再设置margin-top往顶部边浏览器DIV的一半,
这样DIV就垂直居中了
为什么DIV的POSITION不用相对定位呢,,
position:relative;width:200px;height:200px;left:0%;top:0%; 这个时候是他在正常流中的位置
BODY没有高度有margin,top:50% 不起作用
left:50% 可以起作用,,但是它是相当于BODY中的一半 ,得设置body{marign:0px;} 才等于整个浏览器宽度的一半。
文字在DIV中竖直居中
(DIV的高度-文字的高度)/2 为padding-top值
然后div高度修改为原DIV的高度-padding-top值