Hliang

个人站

我说晚了你就不学了吗?


常见水平垂直居中方法

让一个不定宽高的div水平垂直居中。

方法一:

    .big {
        background: red;
        width: 200px;
        height: 200px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    .small {
        display: inline-block;
        vertical-align: middle;
        background-color: green;
        width: 100px;
        height: 100px;
    }

方法二:

    .big {
        background: red;
        width: 200px;
        height: 200px;
        display: table-cell;
        vertical-align: middle;
    }
    .small {
        background-color: green;
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

方法三:

    .big {
        background: red;
        width: 200px;
        height: 200px;
        position: relative;
    }

    .small {
        background-color: green;
        width: 100px;
        height: 100px;
        transform: translate(-50%, -50%);
        position: absolute;
        top: 50%;
        left: 50%;
    }