美文网首页
css布局水平,垂直,居中

css布局水平,垂直,居中

作者: 考拉程序媛 | 来源:发表于2020-04-29 15:55 被阅读0次

    文字水平居中
    使用inline-block 和 text-align实现

    .parent{text-align: center;}
    .child{display: inline-block;}

    使用margin:0 auto来实现
    .child{width:200px;margin:0 auto;}

    使用table实现
    .child{display:table;margin:0 auto;}

    使用绝对定位实现

    .parent{position:relative;}
    /或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好/
    .child{position:absolute;left:50%;transform:translate(-50%);}
    实用flex布局实现

    /第一种方法/
    .parent{display:flex;justify-content:center;}
    /第二种方法/
    .parent{display:flex;}
    .child{margin:0 auto;}

    垂直居中
    在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;

    /第一种方法/
    .parent{display:table-cell;vertical-align:middle;height:20px;}
    /第二种方法/
    .parent{display:inline-block;vertical-align:middle;line-height:20px;}
    实用绝对定位

    .parent{position:relative;}
    .child{positon:absolute;top:50%;transform:translate(0,-50%);}
    实用flex实现

    .parent{display:flex;align-items:center;}
    水平垂直全部居中

    利用vertical-align,text-align,inline-block实现

    .parent{display:table-cell;vertical-align:middle;text-align:center;}
    .child{display:inline-block;}
    利用绝对定位实现

    .parent{position:relative;}
    .child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
    利用flex实现

    .parent{display:flex;justify-content:center;align-items:center;}

    [https://zhuanlan.zhihu.com/p/33013417]

    相关文章

      网友评论

          本文标题:css布局水平,垂直,居中

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