第一种方法:
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%);
}
优点：
内容可变高度
代码量少
缺点：
IE8不支持属性需要写浏览器厂商前缀可能干扰其他transform效果某些情形下会出现文本或元素边界渲染模糊的现象
