<!--
div {
position:absolute
top:50%
left:50%
margin:-150px 0 0 -200px
width:400px
height:300px
border:1px solid #008800
}
-->
</style>
<div>让层垂直居中于浏览器窗口</div>
其实解决的思路是这样的：首们需要position:absolute绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写
注：上面的是一般用于垂直居中与浏览器，想解决div垂直居中与外层div的话，只需要给外层div加上position:relative就好了；记住，外层div要设定高度和宽度
<div class="one">流体布局</div><div class="two">布局</div>
.one{width:80% font-size:em(设置自体的大小，em可以让自体根据浏览器不同而更加优与阅读）}
.two{width:20%font-size:em}
注：通过这样设置，就可能拉动浏览器，盒模型的宽度就会随着你的拉动而变大缩小，但也是有一定限度的。
扩展资料：关于div的用法
1、<div>可定义文档中的分区或节（division/section）。
2、<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
3、<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div>固有的唯一格式表现。可以通过 <div>的 class 或 id 应用额外的样式。
不必为每一个 <div>都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div>元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
CSS宽高auto不管用的原因：1、css属性覆盖
原因：被css继承属性覆盖了；
解决办法：利用chrome查找被覆盖属性的父级css属性，并删除。
2、css属性冲突
原因：上级div设置了浮动属性（float）；
解决办法：删除上级div的浮动属性，或者中间加一个<ul>，并设置ul的overflow:auto。
