第一種方法
缺點：需要提前知道元素的寬度和高度。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border:1px solid #333;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 寬度的一半 */
}
</style>
</head>
<body>
<div>相對定位元素
<div class="box">絕對定位元素</div>
</div>
</body>
</html>
第二種方法
當元素的尺寸不固定時，都可以居中。不過IE8以上才相容這種寫法，移動端可忽略。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border:1px solid #333;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* 50%為自身尺寸的一半 */
}
</style>
</head>
<body>
<div>相對定位元素
<div class="box">絕對定位元素</div>
</div>
</body>
</html>入代碼片
第三種方法
使用margin：auto實作居中；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border:1px solid #333;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* 有了這個就自動居中了 */
}
</style>
</head>
<body>
<div>相對定位元素
<div class="box">絕對定位元素</div>
</div>
</body>
</html>
以上就是絕對定位元素的水準垂直居中的方法，希望對大家的學習或者工作能帶來一定的幫助！
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)