CSS居中

作者: 何大必 | 来源:发表于2018-11-04 11:09 被阅读0次

    居中布局在平时的页面开发中十分常见,今个周日,特来总结一番,以备日后更加灵活的使用各种居中的方式。
    首先准备元素:

    <div class="parent">
           <div class="child"></div>
    </div>
    

    1、水平居中

    1)、margin:0 auto+设置width

    .parent{width: 300px;height: 300px;border: 1px solid #ccc;}
     .child{
             width: 100px;height: 100px;background-color: red; 
             margin: 0 auto;
     }
    

    2)text-align:center,inline、inline-block元素有效
    在父元素上设置。
    **3)inline-block实现水平居中
    .parent{
                width: 200px;height: 200px;border: 1px solid red;
                text-align: center;font-style: 0;letter-spacing: -4px;word-spacing: -4px;
    }
    .child{
        width: 100px;height: 100px;background-color: red; 
         display: inline-block;letter-spacing: normal;word-spacing:normal;font-size: 14px; 
    }
    

    2、绝对居中(即水平垂直都居中)

    1)绝对定位+负margin值
    需要设置元素的width、height

    .parent{
           position: relative;
           width: 300px;height: 300px;border: 1px solid #ccc;
    }
    .child{
         width: 100px;height: 100px;background-color: red;
         position:absolute;top: 50%;left:50%;
         margin: -50px 0 0 -50px;
    }
    
    image.png
    2)绝对定位+margin:auto
    .parent{
          position: relative;
          width: 300px;height: 300px;border: 1px solid #ccc;
    }
    .child{
           width: 100px;height: 100px;background-color: red;
           position:absolute;top: 0;bottom: 0;left:0;right: 0;
           margin: auto;
    }
    

    3)绝对定位和transfrom
    感觉bigger很高,下次我要使用看看效果如何

    .parent{
           position: relative;
           width: 300px;height: 300px;border: 1px solid #ccc;
    }
    .child{
         width: 100px;height: 100px;background-color: red;
         position:absolute;top: 50%;left:50%;
        transform: translate(-50%,-50%);
    }
    

    暂时经常用到的都写了,当然关于居中还有各种各样的奇淫巧技,日后有需要再补咯。
    4)使用flex布局居中的方式

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

    相关文章

      网友评论

          本文标题:CSS居中

          本文链接:https://www.haomeiwen.com/subject/twkrxqtx.html