在日常开发过程中，我们会经常使用到div居中来处理布局，今天我就把我在开发过程中，遇到的div居中处理方法总结一下，方便日后查看！
1、 水平居中：给div设置一个宽度，然后添加margin:0 auto属性
div{
margin:0 auto;
width:200px;
height:200px;
background-color: pink;
}
2、水平垂直居中之让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top:;
left:;
bottom:;
right:;
background-color: pink;
}
3、水平垂直居中之确定容器的宽高
div {
position: absolute;
width:300px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px; /* 外边距为自身宽高的一半 */
background-color: pink;
}
4、水平垂直居中之未知容器的宽高，利用 `transform` 属性
div {
position: absolute;
width:300px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
5、水平垂直居中之利用 flex 布局
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height:600px;
}
.container div {
width: 300px;
height: 300px;
background-color: pink;
}
6、div撑满整屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div撑满整屏</title>
<style>
.page{
background:pink;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
}
</style>
</head>
<body>
<div class="page"></div>
</body>
</html>