水平垂直居中

﹏ヽ暗。殇╰゛Y 2021-08-30 01:18 682阅读 0赞

几种水平垂直居中

固定宽高

  1. margin 负值



    .a { 

    1. width: 500px;
    2. height: 300px;
    3. border: 1px solid cadetblue;
    4. position: relative;

    }

    .a1 { 

    1. width: 100px;
    2. height: 100px;
    3. background-color: chocolate;
    4. position: absolute;
    5. left: 50%;
    6. top: 50%;
    7. margin-left: -50px;
    8. margin-top: -50px;

    }

  2. calc



    .b { 

    1.      width: 500px;
    2.      height: 300px;
    3.      border: 1px solid cadetblue;
    4.      position: relative;
    5.  }
    7.  .b1 { 
    8.      width: 100px;
    9.      height: 100px;
    10.      background-color: chocolate;
    11.      position: absolute;
    12.      left: calc(50% - 50px);
    13.      top: calc(50% - 50px);
    14.  }

  3. margin auto



    .c { 

    1. width: 500px;
    2. height: 300px;
    3. border: 1px solid cadetblue;
    4. position: relative;

    }

    .c1 { 

    1. width: 100px;
    2. height: 100px;
    3. background-color: chocolate;
    4. position: absolute;
    5. top: 0;
    6. left: 0;
    7. right: 0;
    8. bottom: 0;
    9. margin: auto;

    }

不固定宽高

  1. flex


    inner

    .d { 

    1.  display: flex;
    2.  justify-content: center;
    3.  align-items: center;

    }

  2. transform


    inner

    .e { 

    1. position: relative;

    }

    .e1 { 

    1. position: absolute;
    2. top: 50%;
    3. left: 50%;
    4. transform: translate(-50%, -50%);

    }

发表评论

表情：
评论列表 （有 0 条评论，682人围观）

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

相关阅读

    相关 水平垂直居中

    实现水平垂直居中的方法有很多，在这里我只介绍两种易用且常见的方法，这两种方法对于固定宽高和不定宽高都有效。 1、transform 方案 // html部分

    Bertha 。Bertha 。/ 0 赞/ 317 阅读

    相关 水平/垂直居中

    一. 水平居中 1.1行内或类行内元素（比如文本和链接） 在块级父容器中让行内元素居中，只需使用 text-align: center;： 这种方法可以

    我就是我我就是我/ 0 赞/ 167 阅读

    相关 水平垂直居中

    （1）水平居中： 元素为行内元素，设置父元素text-align:center 如果元素宽度固定，可以设置左右margin为auto 如果元素为绝对定位（或

    你的名字你的名字/ 0 赞/ 357 阅读