通过display:flex实现CSS垂直居中

父元素添加

display: flex;

子元素添加

align-self: center

示例

<div class='father'><div class='child'></div></div><style>.father {background: #ff6b89;height: 600px;width: 100px;dispaly: flex;}.child {background: #6a83ca;height: 100px;width: 100px;align-self: center; }</style>