实现DIV屏幕居中

第一种方法:

CSS代码 :

     .dv1{
            height:200px;
            width: 200px;
            border:1px solid red;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
        }

HTML代码 :

<div></div> 

第二种方法:

css代码 :

       .dv1{
            height:200px;
            width: 200px;
            position: absolute;
        }

html代码 :

 <div></div>

JS代码 :

        var a=document.querySelector('div')
        //获取浏览器可视区的高度
        var height=document.documentElement.clientHeight;
        // 获取可视区域的宽度
        var widht=document.documentElement.clientWidth;
        //获取div的高度 
        var gao=a.offsetHeight;                        
        //获取div的宽度
        var kuan=a.offsetWidth;
        //设置上下距离
        var sgao=(height-gao)/2+'px'
        //设置左右距离
        var sgoo2=(widht-kuan)/2+'px'
        a.style.top=sgao
        a.style.left=sgoo2

第三种方法 :

HTML代码 :

<div></div> 

CSS代码 :

        dv1{
            height:200px;
            width: 200px;
            border:1px solid red;
            position: absolute;
            text-align: center;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        } 

优点 :

良好的跨浏览器特性，兼容IE6-IE7。

代码量少。

缺点 :

不能自适应。不支持百分比尺寸和min-/max-属性设置。

内容可能溢出容器。

边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况

第四种方法 :

HTML代码 :

<div></div>

CSS代码 :

        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

优点：

1. 内容可变高度

2.  代码量少
   

缺点：

1.  IE8不支持
   

2.  属性需要写浏览器厂商前缀
   

3.  可能干扰其他transform效果
   

4. 某些情形下会出现文本或元素边界渲染模糊的现象