這分為兩種情況：
1、有寬高的情況下猜绣，實(shí)現(xiàn)水平和垂直居中
方法一：使用定位 position:absolute;left和top值為50%；然后margin的left和top減去寬高的一半赔蒲。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:200px;
height:200px;
background-color:red;
position:absolute;
left:50%;
top:50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果圖：
Paste_Image.png
方法二：使用定位position:absolute;四個(gè)方向值都是0辐马，然后margin：auto；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="box">有寬高的div</div>
</body>
</html>
效果圖同上毅弧。
2气嫁、沒(méi)有寬高的情況下，元素寬高由內(nèi)容撐開(kāi)
方法一：結(jié)合css3的transform:translate(-50%,-50%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color:red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">沒(méi)有寬高的div够坐，大小由內(nèi)容撐開(kāi)</div>
</body>
</html>
效果圖：
Paste_Image.png
方法二：使用js實(shí)現(xiàn)寸宵，實(shí)現(xiàn)水平和垂直居中，原理和第一種情況的第一種方法一樣元咙，使用定位和margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color:red;
padding: 10px;/*主要用于說(shuō)明獲取寬高的問(wèn)題*/
}
</style>
</head>
<body>
<div class="box" id="div1">用js實(shí)現(xiàn)水平垂直居中</div>
</body>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oDiv = document.getElementById('div1');
//alert(oDiv.clientWidth);//有padding的時(shí)候是180px梯影，沒(méi)有padding的時(shí)候是160px
oDiv.style.position = "absolute";
oDiv.style.left = "50%";
oDiv.style.top = "50%";
oDiv.style.marginLeft = -(oDiv.clientWidth/2) + "px";
oDiv.style.marginTop = -(oDiv.clientHeight/2) + "px";
},false);
</script>
</html>
效果圖：
Paste_Image.png
方法三：使用表格display：table-cell，把其父級(jí)變成表格樣式庶香，再利用表格的樣式來(lái)進(jìn)行居中甲棍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width:500px;
height:500px;
border:1px solid black;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.box{
background-color:red;
display:inline-block;
}
</style>
</head>
<body>
<div class="box">使用表格實(shí)現(xiàn)垂直水平居中</div>
</body>
</html>
效果圖：
Paste_Image.png
以下是關(guān)于display：table-cell的相關(guān)解釋?zhuān)?/p>
Paste_Image.png
方法四：利用CSS3彈性盒模型（flexBox）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width:400px;
height:400px;
border:1px solid black;
display:flex;
justify-content: center;
align-items:center;
}
.box{
background-color: red;
}
</style>
</head>
<body>
<div class="box">彈性盒模型</div>
</body>
</html>
效果圖：
Paste_Image.png
