body{/* 漸變色 */background-image: linear-gradient(0deg,rgba(247, 247, 247, 1) 23.8%,rgba(252, 221, 221, 1) 92%);/* height: 100%; *//* vh整個視窗的高度 ,100vh相當于整個視口的高度*/height: 100vh; display: flex;/* 豎直方向排列 */flex-direction: column; /* 交叉軸居中 *//* 注意這邊設置了排序方向往下,設置垂直居中效果是豎排居中的 */align-items: center;justify-content: center; }

當使用flex布局中,設置豎直方向排序,設置水平居中效果為豎直居中

設置豎直居中效果為水平居中

具體bug還沒找到

總結

以上是生活随笔為你收集整理的CSS使用flex布局垂直居中水平居中问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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