Flex布局实现div内部子元素垂直居中

以你之姓@ 2022-04-10 10:47 736阅读 0赞

1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex-direction   flex-wrap     flex-flo   justify-conten  align-items   align-content![3791e575c48b3698be6a94ae1dbff79d.png][]

2、块内元素垂直居中实现

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>关于元素垂直居中</title>
        <style>
            html, body {
                border: 0;
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
    
            .div-main {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 30%;
                width: 50%;
                background: #00a2d4;
            }
    
            .sub-span {
                margin: auto;
                font-size: xx-large;
            }
     
        </style>
    </head>
    
    <body>
    
    <div class="div-main">
    
        <span class="sub-span">
        洛神赋
        </span>
    </div>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdjaGVuZ3d1MjAxMg_size_16_color_FFFFFF_t_70][]

[3791e575c48b3698be6a94ae1dbff79d.png]: /images/20220331/371b472c71ae45e6a73e26f5c63e2161.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdjaGVuZ3d1MjAxMg_size_16_color_FFFFFF_t_70]: /images/20220331/5a120c24cd6d435ebb68453fd181cc33.png