flex布局垂直居中

使用Flex布局实现圆圈居中排列

最新推荐文章于 2023-02-14 22:13:05 发布

原创最新推荐文章于 2023-02-14 22:13:05 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #css

css 专栏收录该内容

5 篇文章

订阅专栏

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

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