垂直居中的 7 种方法

HTML:

    <div class="parent">
        <div class="son">

        </div>
    </div>

CSS:(这是前提css)

    /* 设置父元素和子元素宽高 */
    .part .parent {
        width: 500px;
        height: 500px;
        background: #f7bb46;
    }

    .part .son {
        width: 300px;
        height: 300px;
        background: #f15050;
    }

第一种

    .part-1 .parent {
        line-height: 500px
    }

    .part-1 .son {
        display: inline-block;
        vertical-align: middle;
    }

第二种

    .part-2 .parent {
        display: flex;
        align-items: center;
    }

第三种

    .part-3 .parent::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    .part-3 .son {
        display: inline-block;
        vertical-align: middle;
    }

第四种 (已知父元素高度)

    .part-4 .son {
        position: relative;
        top:50%;
        transform: translateY(-50%);
    }

第五种

    .part-5 .parent {
        position: relative;
    }
    .part-5 .son {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

第六种

    .part-6 .parent {
        position: relative;
    }
    .part-6 .son {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

第七种 (已知子元素高度为300px)

    .part-7 .parent {
        padding-top:calc((100% - 300px)/2);
        box-sizing: border-box;
    }

第七种自己想的(不喜勿喷!hahahah)
如需转载,请注明出处。

Last modification:August 12th, 2020 at 01:12 am
如果觉得我的文章对你有用,请随意赞赏