?布局說明：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垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

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