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

原创 2015年11月18日 11:51:36


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居中。

 

 

相关文章推荐

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...

position: absolute;绝对定位水平居中问题

http://hi.baidu.com/huhai586/item/a9ff91ca7ef1afd59744524a 用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置...

position:absolute;的DIV 如何居中

外层DIV{position:realtive} 内层DIV{positon:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-150...

HTML几种设置水平居中和垂直居中的方式

1.平居中设置-定宽块状元素 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。(...

css中absolute使用,用position和transform是div里面的div垂直居中

我以前看的一本书上是这么写的如果一个div的position属性为absolute那么这个div不会受页面的其他元素影响,直接基于页面定位这是错误的。看w3c,用google查positon abso...

DIV布局属性中position属性的四大用法

正确的使用DIV布局属性之position属性 Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Posit...

DIV position属性

DIV定位,position属性 absolute :绝对定位  位置相对于文档流的左上角,会脱离文档流,飘起来。 配合top、right、bottom、left使用。 有意思的是绝对定位也是“相...

DIV的Position属性和DIV嵌套DIV

1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table。这里一如既往的推荐使用 div布局,其实我们只要掌握了div的positio...

CSS 之 Position 及只用CSS做到完全居中

position的四个属性值: relativeabsolutefixedstatic 下面分别讲述这四个属性。      sub1      sub2 1. relative relati...
  • kai161
  • kai161
  • 2013年06月09日 11:10
  • 5195

CSS position 定位知识细节

CSS position 定位知识细节
  • Dong_PT
  • Dong_PT
  • 2016年04月09日 22:03
  • 625
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中div布局position以及水平居中
举报原因:
原因补充:

(最多只允许输入30个字)