父盒子设置弹性布局使子盒子垂直水平居中

最新推荐文章于 2024-01-26 17:00:00 发布

原创最新推荐文章于 2024-01-26 17:00:00 发布 · 643 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

web 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何通过CSS3的Flexbox布局，设置父元素属性以实现子元素在父容器中垂直和水平居中对齐的方法，包括相关的关键样式属性及其作用。

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


         .container{
            width: 500px;
            height: 600px;
            background-color: pink;
            /* 设置为弹性盒子 默认横向摆放*/
            display: flex;

            /* 改变弹性盒子摆放方式
            flex-direction: row | row-reverse | column | column-reverse
            row 默认横向 
            row-reverse 横向反转 类似右浮动
            column 纵向排列
            column-reverse 纵向反转 
            */
            flex-direction: column;

            /* justify-content:flex-start|flex-end|center 
                垂直方向的摆放
            */
            justify-content: center;
            /* 水平方向 */
            /*align-items:  flex-start 居左摆放 |flex-end 居右摆放|center 居中摆放*/
            align-items: center;
        
        }
        .box1{
            height: 50px;
            width: 50px;
            background-color: red;
        }
        .box2{
            height: 50px;
            width: 50px;
            background-color: blue;
        }
        .box3{
            height: 50px;
            width: 50px;
            background-color: green;
        }
 

```html
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

在这里插入图片描述