flex布局垂直居中

全栈程序员站长

发布于 2022-07-01 13:56:25

57100

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

使用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;
}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/131250.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https