小編給大家分享一下css如何使用flex布局實現居中，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

使用flex布局實現居中

　　.outer{
　　width:300px;
　　height:300px;
　　background-color:#d3d60e;
　　display:flex;
　　justify-content:center;
　　align-items:center;
　　}
　　.inner{
　　color:#fff;
　　width:100px;
　　height:100px;
　　background-color:#13b86b;
　　text-align:center;
　　}
　　<divclass="outer">
　　<divclass="inner">flex居中</div>
　　</div>

總結

以上是生活随笔為你收集整理的css如何使用flex布局实现居中的全部內容，希望文章能夠幫你解決所遇到的問題。

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