有关css position属性实现div在浏览器中垂直居中的方法，垂直居中使用css position来定位，如何利用css position实现div浏览器垂直居中布局，一起来学习下。
例子：
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值
例子：
1、单行垂直居中
文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
<div style="line-height:500px;height:500;">
2、层水平居中
设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。
复制代码 代码示例:
#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
}
3、层中的文字水平居中
在childdiv的css加上text-align:center;
复制代码 代码示例:
#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
text-align:center;
}
4、div层垂直居中
复制代码 代码示例:
<div style="width:275px;height:375px;border: solid red;">
<div style=" background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style=" background:red;position:static;position:absolute9; top: 50%;">
<div style=" background:blue;position: relative; top: -50%;">
居中居中
</div>
</div>
</div>
</div>
5、div层垂直水平居中，英文超长换行
复制代码 代码示例:
<div style="float:left;width:275px;height:375px;border: solid red;">
<div
style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div
style="position:static;position:absolute9; top: 50%;">
<div style="position: relative; top: -50%; text-align: center;">
<div style="width: 85px;WORD-WRAP:
break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;">
w居中居中居中居中居中居中居中居中居中居中居中居中居中居中
</div>
</div>
</div>
</div>
</div>
6、div垂直滚动
复制代码 代码示例:
<div style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">
居中居中
</div>
7、垂直居中和使用text-align水平居中
复制代码 代码示例:
<div style="float:left;width:275px;height:375px;border: solid red;">
<div
style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div
style="position:static;position:absolute9;top: 50%;">
<div
style="position: relative; top: -50%; text-align:center;">
<div style="width: 275px;">
<div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;">
w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中
</div>
</div>
</div>
</div>
</div>
</div>
8、垂直居中和使用margin水平居中
复制代码 代码示例:
<div style="float:left;width:275px;height:375px;border: solid red;">
<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute9; top: 50%;">
<div style="position: relative; top: -50%; ">
<div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;">
w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中
</div>
</div>
</div>
</div>
</div>
