display:flex垂直居中
生活随笔
收集整理的這篇文章主要介紹了
display:flex垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?布局說明:1. 場次為一場比賽
2. 比賽雙方是交戰的兩個隊伍
? ? ? ? ? ? ? ?3. 一場比賽可以有多種玩法,所以場的每個玩法的布局的高度都不確定。
主要說下我學到的垂直居中的flex。
1. 第一次嘗試。
1 <div class="parent"> 2 <h1>我是通過flex的水平垂直居中噢</h1> 3 <h1>我是通過flex的水平垂直居中噢</h1> 4 <h1>居中</h1> 5 <h1>我是通過flex的水平垂直居中噢</h1> 6 </div> html,body{width: 100%;height: 200px;margin:0;padding:0; } .parent {display:flex;align-items:center;/*垂直居中*/justify-content: center;/*水平居中*/width:100%;height:100%;background: #ddd } h1{border:1px solid #f00;margin:0;padding:0;width:25%; }
但是我想要的效果是第三欄的高度和其他欄的高度一樣,并且居中。如此css改成了
2. 第二次的更改
html,body{width: 100%;height: 200px;margin:0;padding:0; } .parent {display:flex;width:100%;height:100%;background: #ddd } h1{border:1px solid #f00;display:flex;align-items:center;/*垂直居中*/justify-content: center;/*水平居中*/margin:0;padding:0;width:25%; }
達到了想要的效果。:) ?相當于又嵌套了一層。
總結
以上是生活随笔為你收集整理的display:flex垂直居中的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 阿里新总部
- 下一篇: 【XSY3344】连续段 DP 牛顿迭代