【CSS】居中1. 水平方向居中使用 margin 属性自动居中：使用 flexbox 布局：使用绝对定位： 2.

1. 水平方向居中

使用 margin 属性自动居中：

.container {
    width: 300px;
    margin: 0 auto; /* 水平方向上居中 */
}

使用 flexbox 布局：

.container {
    display: flex;
    justify-content: center; /* 水平方向上居中 */
}

使用绝对定位：

.container {
    position: relative;
}

.box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 水平方向上居中 */
}

2. 垂直方向居中

使用 flexbox 布局：

.container {
    display: flex;
    align-items: center; /* 垂直方向上居中 */
}

使用绝对定位和 transform 属性：

.container {
    position: relative;
    height: 200px; /* 父容器的高度 */
}

.box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 垂直方向上居中 */
}

或者可以使用 margin-top: -50%; 。

使用 vertical-align:midle; ：

vertical-align 属性可被用于两种环境：

使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片<img>：
垂直对齐表格单元内容。

注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。

.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle; /* 垂直方向上居中 */
}

使行内元素盒模型与其行内元素容器垂直对齐。 所以需要有一个兄弟元素作为基准，而我们又不希望让兄弟显示。

<style>
    .container {
        width: 500px;
        height: 300px;
        background: pink;
        text-align: center;
    }
    .item {
        width: 100px;
        height: 100px;
        background: skyblue;
        vertical-align: middle;
        display: inline-block;
    }
    .brotherBox {
        height: 100%;
        /*width: 2px;*/
        background: red;
        display: inline-block;
        vertical-align: middle;
    }
</style>
<body>
<div class="container">
    <div class="item"></div>
    <div class="brotherBox"></div>
</div>
</body>

也可以用伪元素作为参照物。

<style>
    .container {
        width: 500px;
        height: 300px;
        background: pink;
        text-align: center;
    }
    .item {
        width: 100px;
        height: 100px;
        background: skyblue;
        vertical-align: middle;
        display: inline-block;
    }
    /*也可以用伪元素作为参照物*/
    .container::before {
        content: '';
        height: 100%;
        /*width: 2px;*/
        display: inline-block;
        vertical-align: middle;
    }
</style>
<body>
<div class="container">
    <div class="item"></div>
    <div class="brotherBox"></div>
</div>
</body>