CSS盒模型垂直居中的方式（前提已知宽高情况下）

1.flex布局

.box{height: 300px;width: 300px;border: 1px solid #000;margin: 50px auto;/* flex布局实现 */display: flex;align-items: center;justify-content: space-around; }.box1{width: 100px;height: 100px;background: #ccc;}

2.定位

.box{height: 300px;width: 300px;border: 1px solid #000;margin: 50px auto;/* 定位实现 父级开启相对定位，子级开启绝对定位，子级设置top，left值为（父级宽高-子级宽高）/2*/position: relative;}
.box1{width: 100px;height: 100px;background: #ccc;position: absolute;left: 100px;top: 100px;}

3.margin值

.box{height: 300px;width: 300px;border: 1px solid #000;margin: 50px auto;}.box1{width: 100px;height: 100px;background: #ccc;/* margin实现 */margin: 100px;}

4.设置transform属性配合margin值

.box{height: 300px;width: 300px;border: 1px solid #000;margin: 50px auto;}.box1{width: 100px;height: 100px;background: #ccc;/* transform属性 + margin实现 */transform: translateY(100px);margin-top: 100px;}