父元素添加

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>

?

總結

以上是生活随笔為你收集整理的通过display:flex实现CSS垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。