今天复习了一下关于居中的几种方式
（1）水平居中：给div设置一个宽度，然后添加margin:0 auto属性
div {
width: 200px;
margin: 0 auto;
}
（2）让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* 方便看效果 */
background-color: pink;
}
（3）水平垂直居中一
div {
/* 相对定位或绝对定位均可 */
position: relative;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
/* 外边距为自身宽高的一半 */
margin: -150px 0 0 -250px;
/* 方便看效果 */
background-color: pink;
}
（4）水平垂直居中二
div {
/* 相对定位或绝对定位均可 */
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 方便看效果 */
background-color: pink;
}
（5）水平垂直居中三：flex盒模型（很强大，建议多了解一下）
.container {
display: flex;
height: 500px;
width: 500px;
border: 1px solid #ccc;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
}
.container div {
width: 100px;
height: 100px;
/* 方便看效果 */
background-color: pink;
}