美文网首页
元素垂直居中方法

元素垂直居中方法

作者: 殊途同归_23c0 | 来源:发表于2018-08-20 09:33 被阅读0次

    元素垂直居中方法

    1. 行高=容器高度

    2. 给父元素:text-align:center;

       给元素自身

            width:0; height:100%;

            display:inline-block(转为行内块);

            vertical-align:middle;

    3. 子绝父相,给父元素添加:position:relation;

        给子元素添加

            position:absolute;

            left:0;

            bottom:0;

            right:0;

            top:0;

            margin:auto;

    4.弹性盒:

       给父元素添加:

                        display:flex;

                        justify-content:center;

                        align-items:center;

    5.子绝父相:

        给子元素添加:left:50%;

                                top:50%;

    相关文章

      网友评论

          本文标题:元素垂直居中方法

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