第一種：已知元素寬高，使元素水平居中
代碼如下:
#test{
width: 200px;
height: 200px;
background: pink;
margin: 0 auto;
text-align: center;
line-height: 200px;
}
margin:0 auto 使元素水平居中，上下的外邊距爲0，左右外邊距爲auto，左右的外邊距會平均分配。當上下的外邊距設置爲auto時，效果和當前效果一致。
第二種：已知元素高寬，使元素垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--已知高寬的元素水平居中的方案-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 400px;
height: 600px;
background: pink;
margin: 0 auto;
}
#test{
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
test
</div>
</div>
</body>
</html>
讓內部div相對於外部div進行定位，內部div的偏移量爲外部div高寬的50%，然後再使內部div向內移動自身的一半。
元素的初始位置如圖中1方塊的位置， 當這時left和top各爲50%時，內部div位於圖中2方塊的位置，設置margin爲負數時，使內部div到達外部div的中間，圖中3方塊的位置。
第三種：已知元素高寬，使元素垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
background: pink;
width: 400px;
height: 600px;
margin: 0 auto;
}
#test{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
testt<br />
</div>
</div>
</body>
</html>
絕對定位盒子的特性
水平方向上：left+right+padding+width+margin = 包含塊水平方向上padding區域的尺寸
垂直方向上：top+bottom+height+padding+margin = 包含塊內垂直方向上padding區域的尺寸
當left、right、top、bottom、padding的值都爲0，margin爲auto時，可使得元素垂直水平居中
第四種：未知元素的高寬，是元素垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
background: pink;
width: 400px;
height: 600px;
margin: 0 auto;
}
#test{
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
testttestttestttestt<br />
testttestttestttestt<br />
testttestttestttestt<br />
testttestttestttestt<br />
testttestttestttestt<br />
</div>
</div>
</body>
</html>
這種方法和第二種方法類似，使內部div相對於外部div進行定位，left和top值都爲外部div的50%，然後通過transform: translate3d(-50%,-50%,0)方法，使元素在x和y中方向上向內移動自身大小的一半，z軸方向上不變。不過大部分瀏覽器不支持該方法。
第五種：使圖片垂直水平居中，也適用於未知元素的垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
text-align: center;
}
body::after{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<img src="img/1.jpg">
</body>
</html>
先讓body的高度變爲100%，然後在body後添加僞類after，設置高度爲100%，寬度爲0，然後使添加的僞類水平居中，最後使圖片的基線對準僞元素的基線即可。