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

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

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

static

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

relative（相对定位）

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

absolute（绝对定位）

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

fixed(固定定位)

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

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

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

 

  
 

 

  

   
    
     
    
    
     
     
    
   

用户名：

  

  

   
    
     
     
    
   

密 码：

  

  

   
    
     
    
   
  
  

 

 

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