一，已知宽度居中；
二，未知宽度居中；
三，平移定位居中；
四，平移不定位居中；
五，flex布局居中；
六，table-call布局居中；
详细代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS水平垂直居中的六种方法</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html body{
width: 100%;
}
main{
width: 600px;
height: 600px;
border: 2px slateblue solid;
margin: 0 auto;
position: relative;
}
div{
width: 200px;
height: 200px;
border: 2px seagreen solid;
text-align: center;
line-height: 200px;
}
/* 已知宽度上下左右居中 */
.known{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
/* 未知宽度上下左右居中 */
.unknown{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
/* 定位平移居中 */
.transform{
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%,-50%);
}
/* 不用定位平移居中 */
.translate{
margin: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* flex布局上下左右居中 */
.flex{
display: flex;
justify-content: center;
align-items: center;
}
/* table-call布局居中 */
.table-call{
display: table-cell;
vertical-align: middle;
}
.table{
margin: 0 auto;
}
</style>
<body>
<main>
<div class="known">已知宽度居中</div>
</main>
<main>
<div class="unknown">未知宽度居中</div>
</main>
<main >
<div class="transform">translate定位居中</div>
</main>
<main>
<div class="translate">translate不定位居中</div>
</main>
<main class="flex">
<div>flex布局居中</div>
</main>
<main class="table-call">
<div class="table">table居中</div>
</main>
</body>
</html>效果如下图：
滚动截屏的图片效果有点偏移，实际效果正常。
