css居中方法

作者: 崔磊8080 | 来源:发表于2018-07-10 19:56 被阅读2次

    css居中方法

    水平居中

    • 内联:爸爸身上写 text-align:center;
    • 块级:
      • margin-left: auto; margin-right: auto;
      • display:flex

    垂直居中

    七种方式实现垂直居中

    1.table自带功能

    2.100% 高度的 afrer before 加上 inline block

    3.div 装成 table

    4.margin-top -50%

    5. translate -50%

    6. absolute margin auto

    7. flex

    .parent{
        dispaly:flex;
        justify-content: center;
        align-item: center;
    }
    

    如果 .parent 的 height 不写,你只需要 padding: 10px 0; 就能将 .child 垂直居中;
    如果 .parent 的 height 写死了,就很难把 .child 居中。
    忠告:能不写 height 就千万别写 height。

    相关文章

      网友评论

        本文标题:css居中方法

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