css水平垂直居中

vertical-align+伪元素

    <div class="container">
        <span class="content">哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
    </div>

    .container {
        width: 200px;
        height: 200px;
        border: 1px solid;
        text-align: center;
    }
    .container::after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .content {
        width: 100px;
        height: 100px;
        border: 1px solid;
        display: inline-block;
        vertical-align: middle;
    }

关于vertical-align

line-height(单行内容的垂直居中)

    <div class="container">
        <span>dsdfs</span>
    </div>

    .container {
        line-height: 100px;
        width: 100px;
        text-align: center;
        border: 1px solid;
    }

关于line-height

相对定位+transform

    <div class="container">
        <div class="content"></div>
    </div>

    .container {
        width: 300px;
        height: 300px;
        border: 1px solid;
    }
    .content {
        width: 200px;
        height: 200px;
        border: 1px solid;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

定位设置的top、left的百分比计算是基于父元素的高宽（content-box）
translate的百分比计算是基于元素本身的高宽(border-box)
这种方式的布局会影响该元素后面的兄弟元素

绝对定位+margin

    <div class="container">
        <div class="content"></div>
    </div>

    .container {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid;
    }
    .content {
        width: 200px;
        height: 200px;
        border: 1px solid;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

这里其实有点不理解top、left、right、bottom的作用

flexbox

    <div class="container">
        <div class="content"></div>
    </div>

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid;
        width: 200px;
        height: 200px;
    }
    .content {
        border: 1px solid;
        width: 100px;
        height: 100px;
    }