使用flex布局實現下面圖中效果：

外框高都為400px,邊框為2px；圓的寬高為100px；中圓是水平居中；下圓是水平居中以及相對于中圓垂直居中（下圓到中圓的距離和下圓到下邊框的距離相等）。效果如圖：

我的實現方法是笨辦法，大佬們多指點

<div class="box"><div class="item"><div class="child"></div></div></div> .box{width: 400px;height: 400px;border: olive solid 2px;display: flex;justify-content: center;align-items: center; } .item{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0.6);border-radius: 100%; } .child{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0.6);border-radius: 100%;margin-top: 125px; }

總結

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

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