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

作者：袖梨 2022-06-25

例子

 代码如下 复制代码

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

   


        

相关文章

精彩推荐