CSS中div布局position以及水平居中

CSS 有三种基本的定位机制：普通流、浮动(float)和定位(position)，除非专门指定，否则所有框都在普通流中定位。

下面我们来看看position的定位机制。position 有四种属性，其含义如下：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative（相对定位）

表示元素框偏移某个距离，即可以位移，这个距离就是元素框未定位之前的原本站位，它原本所占的空间仍保留。

absolute（绝对定位）

表示元素框偏移某个距离，并且元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。即可以存在于任何位置。

fixed(固定定位)

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。即绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置，不论浏览器的视框怎么变化，其位置始终相对于视框不变。

由于static与fix比较简单且用的较少，故以下详细介绍relative与absolute的用法。

我们在写页面时经常会遇到如下问题，就是浏览器窗口大小变化时，div布局也就会出现混乱的局面，解决这类问题问题最好方法就是外层div设置relative布局，内层设置absolute布局，然后调试一下具体div的位置即可，现在来看下列,一个简单的登陆框：

<div style="position:relative;" width="100%" height="100%">

  <div style="position:absolute;" >
   <img src="StormsAndFloods/SRFTTFC/Audit/img/imag55.png" width="100%" height="100%"></img>
  </div>

  <div style="position:absolute;background-color:#C2D4D6;border:3px;border-color:black;border-radius:5px;;width:350px;height:220px;margin-top:18%;margin-left:50%;z-index:999;font-family:宋体;filter: alpha(opacity=80); opacity:0.8; ">
   <div style="margin-top:30px;position:absolute" >
    <table>
     <tr style="height:20px;">
      <td></td>
     </tr>
     <tr >
      <td style="width:100px;text-align:right"><b>用户名：</b></td>
      <td><input type="text" id="name" style="width:200px;"/></td>
     </tr>
    </table>
   </div>
   <div style="margin-top:90px;position:absolute" >
    <table>
     <tr >
      <td style="width:100px;text-align:right"><b>密&#160;码：</b></td>
      <td><input type="password" id="password" style="width:200px;"/></td>
     </tr>
    </table>
   </div>
   <div style="margin-top:130px;position:absolute" >
    <table>
     <tr >
      <td style="width:350px;text-align:center;cospan:2"><input type="submit" value="登录" style="width:70px;height:25px;background-color:#FFBA12;border:1px;border-color:gray;border-radius:3px;"/></td>
     </tr>
    </table>
  
   </div>
  </div>

 </div>

 那么问题来了，当我们的浏览器分辨率不同时，难免会出现div的不居中问题，利用text-align:center和margin:0 auto;即可以居浏览器的中间。注意是在body中设置text-align:center,把要居中的div设置属性margin:0 auto，如果是div,则是对于div居中。