flex布局垂直居中

最新推荐文章于 2025-05-20 18:21:18 发布

小月鸭

最新推荐文章于 2025-05-20 18:21:18 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： flex css

本文链接：https://blog.youkuaiyun.com/pyj2017/article/details/117124006

css 专栏收录该内容

1 篇文章

订阅专栏

本文档展示了一种使用Flex布局在400px的盒子内居中放置两个100px圆的方法。上圆水平居中，下圆则在上圆水平居中并保持与上圆垂直居中，同时与下边框距离相等。通过CSS样式实现该布局，主要涉及到justify-content和align-items属性的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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