用 CSS 和 JS 实现元素的水平垂直居中

一、CSS 实现（2种方法）

方法1：已知要居中元素的宽高

.d1{
width:200px;
height:200px;
background-color:red;
position:absolute;
top:50%;
left:50%;
margin-top: -100px;
margin-left: -100px;
} 方法2：<
4000
/strong>未知要居中元素的宽高（移动端建议这么做）
.d1{
width:200px;
height:200px;
background-color:red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
}[b]二、JS 实现
function middle(){
//获取屏幕的高度
var heightBig=window.innerHeight;
//获取元素的高度
var d1=document.querySelector(".d1");
var heightSmall=parseFloat(window.getComputedStyle(d1).height);
d1.style.margin=(heightBig-heightSmall)/2+"px auto";
}
middle();
window.onresize=middle;