html中div屏幕居中,实现DIV屏幕居中

第一种方法:

CSS代码 :

.dv1{

height:200px;

width: 200px;

border:1px solid red;

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

margin: auto;

}

HTML代码 :

第二种方法:

css代码 :

.dv1{

height:200px;

width: 200px;

position: absolute;

}

html代码 :

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代码 :

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代码 :

CSS代码 :

div {

width: 200px;

height: 200px;

border: 1px solid red;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

优点：

内容可变高度

代码量少

缺点：

IE8不支持

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

可能干扰其他transform效果

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