CSS position实现DIV浏览器垂直居中布局

时间：2022-06-25 10:07:14 编辑：袖梨来源：一聚教程网

例子

代码如下	复制代码
position:absolute;width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px

POSITION用绝对定位是脱离文档流，，针对浏览器，

DIV左上角顶点距浏览器左边整个浏览器宽度的一半即50%

DIV左上角顶点距浏览器顶部整个浏览器高度的一半即50%

现在DIV左上角顶点在浏览器的中心位置，然后设置margin-left 往左边浏览器DIV的一半，再设置margin-top往顶部边浏览器DIV的一半，

这样DIV就垂直居中了

为什么DIV的POSITION不用相对定位呢，，

position:relative;left:0%;top:0%; 这个时候是他在正常流中的位置

BODY没有高度有margin，top:50% 不起作用

left:50% 可以起作用，，但是它是相当于BODY中的一半，得设置body{marign:0px;} 才等于整个浏览器宽度的一半。

文字在DIV中竖直居中

(DIV的高度-文字的高度)/2 为padding-top值

然后div高度修改为原DIV的高度-padding-top值

下面看一些例子

1、单行垂直居中

　　文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

代码如下	复制代码

2、层水平居中

　　设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。

代码如下	复制代码
#parentdiv { width: 500px; } #childdiv { width: 200px; margin:0 auto; }

3、层中的文字水平居中

　　在childdiv的css加上text-align:center;

代码如下	复制代码
#parentdiv { width: 500px; } #childdiv { width: 200px; margin:0 auto; text-align:center; }

4、div层垂直居中

代码如下	复制代码
style=" background:red;position:static;position:absolute9; top: 50%;"> style=" background:blue;position: relative; top: -50%;"> 居中居中

5、div层垂直水平居中，英文超长换行

代码如下	复制代码
style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"> style="position:static;position:absolute9; top: 50%;"> word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;"> w居中居中居中居中居中居中居中居中居中居中居中居中居中居中

6、div垂直滚动

代码如下	复制代码
style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">

居中居中

7、垂直居中和使用text-align水平居中

代码如下	复制代码
style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"> style="position:static;position:absolute9;top: 50%;"> style="position: relative; top: -50%; text-align:center;"> w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中

8、垂直居中和使用margin水平居中

代码如下	复制代码
style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"> style="position:static;position:absolute9; top: 50%;"> style="position: relative; top: -50%; "> w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中w居中居中

推荐专题

最新下载

热门教程

CSS position实现DIV浏览器垂直居中布局

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程