美文网首页
七、元素垂直水平居中的方案

七、元素垂直水平居中的方案

作者: yuzhan550 | 来源:发表于2019-12-08 22:31 被阅读0次

    1.无论是否知道宽高

    a.包含块一定得是容器

    b.position:absolute ,left:50%;top:50%,

    c. transform:translate3d(-50%,-50%,0);

    (abc是一个方案的三个步骤)

    2. 已知宽高:

    方案一:

    position:absolute; lrtb=0; margin=auto
    包含块的width = left+right+width+padding+margin
    包含块的height = top+bottom+height+padding+margin

    方案二:

    a.包含块一定得是容器

    b.position:absolute ,left:50%;top:50%,

    c. marginT/L=-50%(自身)

    3. 未知宽高:

    flex

    相关文章

      网友评论

          本文标题:七、元素垂直水平居中的方案

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