CSS中div布局position以及⽔平居中
CSS 有三种基本的定位机制：普通流、浮动(float)和定位(position)，除⾮专门指定，否则所有框都在普通流中定位。
css固定定位下⾯我们来看看position的定位机制。position 有四种属性，其含义如下：
static
元素框正常⽣成。块级元素⽣成⼀个矩形框，作为⽂档流的⼀部分，⾏内元素则会创建⼀个或多个⾏框，置于其⽗元素中。
relative（相对定位）
表⽰元素框偏移某个距离，即可以位移，这个距离就是元素框未定位之前的原本站位，它原本所占的空间仍保留。
absolute（绝对定位）
表⽰元素框偏移某个距离，并且元素原先在正常⽂档流中所占的空间会关闭，就好像元素原来不存在⼀
样。元素定位后⽣成⼀个块级框，⽽不论原来它在正常流中⽣成何种类型的框。即可以存在于任何位置。
fixed(固定定位)
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本⾝。即绝对定位是被固定在⽹页中的某⼀个位置，⽽固定定位则是固定在浏览器的视框位置，不论浏览器的视框怎么变化，其位置始终相对于视框不变。
由于static与fix⽐较简单且⽤的较少，故以下详细介绍relative与absolute的⽤法。
我们在写页⾯时经常会遇到如下问题，就是浏览器窗⼝⼤⼩变化时，div布局也就会出现混乱的局⾯，解决这类问题问题最好⽅法就是外层div设置relative布局，内层设置absolute布局，然后调试⼀下具体div的位置即可，现在来看下列,⼀个简单的登陆框：
<div width="100%" height="100%">
<div >
<img src="StormsAndFloods/SRFTTFC/Audit/img/imag55.png" width="100%" height="100%"></img>
</div>
<div >
<div >
<table>
<tr >
<td></td>
</tr>
<tr >
<td ><b>⽤户名：</b></td>
<td><input type="text" id="name" /></td>
</tr>
</table>
</div>
<div >
<table>
<tr >
<td ><b>密 ；码：</b></td>
<td><input type="password" id="password" /></td>
</tr>
</table>
</div>
<div >
<table>
<tr >
<td ><input type="submit" value="登录"
/></td>
</tr>
</table>
</div>
</div>
</div>
那么问题来了，当我们的浏览器分辨率不同时，难免会出现div的不居中问题，利⽤text-align:center和margin:0 auto；即可以居浏览器的中间。注意是在body中设置text-align:center，把要居中的div设置属性margin:0 auto，如果是div，则是对于div居中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。