CSS使用flex布局垂直居中水平居中问题
生活随笔
收集整理的這篇文章主要介紹了
CSS使用flex布局垂直居中水平居中问题
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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布局垂直居中水平居中问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 湛江财贸学校计算机二级,湛江财贸学校
- 下一篇： 新时代 计算机专业前景,新时代的四大“