CSS 学习笔记 - 水平垂直居中

旧城等待， 2022-12-10 14:39 97阅读 0赞

[id^="p"]{   width:300px; height:100px; background-color:lightgreen;border: solid 1px #333; }
    [id^="p"]>div, [id^="c"]{   
        width:50px; height:50px; background-color:red; /* 设置高宽添加背景色，便于查看 */
        text-align: center; /* 文字水平居中 */
        line-height: 50px; /* 行高与容器保持一致，文字就垂直居中了 */
    }
    
    /* ============================== 弹性容器 =================================*/
    /* 方法1：直接在弹性容器上设置 */
    #p1{ 
      display: flex; /* 声明为弹性盒子 */
      justify-content: center; /* 子元素水平居中 */
      align-items: center; /* 子元素垂直居中 */
    }
    /* 方法2 */
    #p2{   display: flex;}
    #p2>div{ 
      margin: auto;
    }
    /* 方法3 */
    #p3{   display: flex;}
    #p3>div{ 
      margin: 0 auto; /* 与【方法2】的区别在于：上下外边距为 0 */
      align-self: center; /* 设置元素垂直居中 */
    }
    /* ============================== Grid =================================*/
    /* 方法1 */
    #p4{   display: grid;}
    #p4>div{ 
      margin: auto;
    }
    /* 方法2 */
    #p5{   display: grid;}
    #p5>div{ 
      justify-self: center;
      align-self: center;
    }
    /* ============================== position: relative =================================*/
    /* 方法1 */
    #p6>div{ 
        position: relative;
        left: 0; right: 0; top: 50%; bottom:0;
        margin: -25px auto 0 auto;
    }
    /* 方法2 */
    #p7>div{ 
        position: relative;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }
    /* ============================== 行内元素 =================================*/
    #p8>div{ 
        position: relative;
        width: auto;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }

**效果展示：**[https://codepen.io/jerryjin/pen/zYqbPRg][https_codepen.io_jerryjin_pen_zYqbPRg]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]

[https_codepen.io_jerryjin_pen_zYqbPRg]: https://codepen.io/jerryjin/pen/zYqbPRg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d0722406abc644db8ff4943b30d22e77.png