flex布局水平垂直居中
生活随笔
收集整理的這篇文章主要介紹了
flex布局水平垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在flex布局中，子元素的屬性代碼寫在父盒子里面，并且flex布局中任何元素都可以設置大小；居中的思路就是分清楚主軸justify-content和側軸align-items，都設置為center即可，代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex居中</title><style>div {display: flex;height: 600px;width: 600px;background-color: green;/* flex屬性寫在父盒子里面 *//* 主軸居中 */justify-content: center;/* 側軸劇中 */align-items: center;}span {height: 200px;width: 200px;background-color: tomato;}</style> </head> <body><div><span></span></div> </body> </html>總結
以上是生活随笔為你收集整理的flex布局水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中华网采访中国红客联盟实录
- 下一篇： 各滤镜处理效果记录，