flex 布局盒子居中显示

向右看齐 2023-02-20 10:56 35阅读 0赞

### flex 布局 盒子居中显示 ###

`display: flex;`  
`justify-content: center;`  
`align-items: center;`

![align-items: center;][align-items_ center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .box { 
                width: 467px;
                height: 377px;
                border: 1px solid red;
                margin: 150px auto;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            .one { 
                width: 177px;
                height: 177px;
                background-color: red;
            }
        </style>
    </head>
    
    <body>
    
        <div class="box">
            <div class="one"></div>
        </div>
    </body>
    
    </html>

[align-items_ center]: https://img-blog.csdnimg.cn/20200626150820508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，35人围观）

还没有评论，来说两句吧...

相关阅读

相关弹性盒子display:flex 布局详解示例

文章目录 1️⃣ 弹性布局 1.容器属性 1.1 flex-direction属性 1.2 flex-wrap

梦里梦外;/ 2024年02月17日 11:44/ 0 赞/ 193 阅读

相关 Flex布局（弹性盒子）

Flex布局的属性 [30分钟彻底弄懂flex布局\_kevin\_xiang的专栏,mail: xiangjie55@qq.com-CSDN博客][30_fl

爱被打了一巴掌/ 2023年10月01日 08:49/ 0 赞/ 155 阅读

相关 Flex弹性盒子布局详解

1、什么是 flex 布局 Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。 2、基本

今天药忘吃喽~/ 2023年07月13日 15:14/ 0 赞/ 181 阅读

相关 flex 布局盒子居中显示

flex 布局盒子居中显示 `display: flex;` `justify-content: center;` `align-items: center;`

向右看齐/ 2023年02月20日 10:56/ 0 赞/ 36 阅读

相关 CSS Flex布局垂直居中显示

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2022年12月21日 06:29/ 0 赞/ 285 阅读

相关 flex弹性盒子布局（详细）

弹性盒模型 1、伸缩容器display Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为

你的名字/ 2022年09月14日 02:41/ 0 赞/ 387 阅读

相关 weChat布局-弹性盒子布局-flex

在父元素设置 display:flex; s三个设置协助: [flex-direction][] 规定灵活项目的方向 flex-direction

Dear 丶/ 2022年05月24日 02:52/ 0 赞/ 437 阅读

相关 Flex 弹性盒子布局

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运

蔚落/ 2022年05月23日 03:29/ 0 赞/ 500 阅读

相关 CSS3弹性盒子flex布局方式

一、CSS3弹性盒子 CSS3 弹性盒子：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的：提供一种更加有效

雨点打透心脏的1/2处/ 2022年01月23日 05:49/ 0 赞/ 514 阅读

相关 flex布局怎样让div居中

用flex布局可以让div或者其他元素居中请看代码可以设置div的display属性为flex，然后设置align-items：center; justify-

痛定思痛。/ 2021年10月19日 05:26/ 0 赞/ 1182 阅读