flex水平垂直居中

<div class="content"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div> .content {display: flex;align-items:center;justify-content:center;border: 1px solid #0000FF;height: 100px;width: 500px;// 下面的代碼可以讓不同寬高的圖片在固定寬高的容器里面正常比例顯示, 并且水平, 垂直居中> img {max-width: 100%;max-height: 100%;}}.item {width: 60px;height: 40px;border: 1px solid red;}

參考文章: https://zhuanlan.zhihu.com/p/84289727

總結

以上是生活随笔為你收集整理的flex垂直居中,水平居中和其他布局方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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