?布局說(shuō)明：1. 場(chǎng)次為一場(chǎng)比賽

　　　　　 2. 比賽雙方是交戰(zhàn)的兩個(gè)隊(duì)伍

? ? ? ? ? ? ? ?3. 一場(chǎng)比賽可以有多種玩法，所以場(chǎng)的每個(gè)玩法的布局的高度都不確定。

主要說(shuō)下我學(xué)到的垂直居中的flex。

1. 第一次嘗試。

1 <div class="parent"> 2 <h1>我是通過(guò)flex的水平垂直居中噢</h1> 3 <h1>我是通過(guò)flex的水平垂直居中噢</h1> 4 <h1>居中</h1> 5 <h1>我是通過(guò)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%; }

達(dá)到了想要的效果。:) ?相當(dāng)于又嵌套了一層。

總結(jié)

以上是生活随笔為你收集整理的display：flex垂直居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。