css水平垂直居中方法搜集利用各种方法实现水平居中和垂直居中，欢迎大家进来进行补充。利用各种方法实现水平居中和垂直居中

1.padding内边距居中

<style>
    .box {
        --itemValue: 50px;
        --value: 200px;
        width: var(--value);
        height: var(--value);
        box-sizing: border-box;
        border: 1px solid #000;
        padding: calc((var(--value) - var(--itemValue))/2);

        .item {
            box-sizing: border-box;
            background-color: pink;
            width: var(--itemValue);
            height: var(--itemValue);
        }
    }
</style>

<body>
    <div class="box">
        <div class="item">居中</div>
    </div>
</body>

2.margin外边距居中

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid #000;

        .item {
            background-color: pink;
            width: fit-content;
            margin: auto;
            --height: 24px;
            height: var(--height);

            /* 适合知道子元素高度的 */
            margin-top: calc(50% - var(--height)/2);

            /* 适合不知道子元素高度的 */
            /* transform: translateY(-50%); */
        }
    }
</style>
<div class="box">
    <div class="item">居中</div>
</div>

3.position定位居中

绝对定位

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        position: relative;

        .item {
            background-color: pink;
            width: fit-content;
            height: fit-content;
            position: absolute;

            /* 方法一 适合子元素有宽高的，或者行内级元素 */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;

            /* 方法二 适合不知道子元素宽高的 */
            /* left: 50%; */
            /* top: 50%; */
            /* transform: translate(-50%, -50%); */
        }
    }
</style>

<div class="box">
    <div class="item">居中</div>
</div>

相对定位

<style>
    .box2 {
        width: 200px;
        height: 200px;
        border: 1px solid #000;

        /* 适合块级子元素，且设置了高度的 */
        .item {
            --height: 100px;
            width: 100px;
            height: var(--height);
            background-color: pink;
            margin: auto;
            position: relative;
            top: calc(50% - var(--height)/2);
        }
    }
</style>
<div class="box2">
    <div class="item">居中</div>
</div>

4.translate平移居中

<style>
    /* 
    适合父子元素都有明确的宽高情况下。
    */
    .box {
        --value: 200px;
        --itemValue: 50px;
        width: var(--value);
        height: var(--value);
        border: 1px solid #000;

        .item {
            background-color: pink;
            width: var(--itemValue);
            height: var(--itemValue);
            --x: calc(var(--value)/2 - var(--itemValue)/2);
            --y: calc(var(--value)/2 - var(--itemValue)/2);
            transform: translate(var(--x), var(--y));
        }
    }
</style>

<div class="box">
    <div class="item">居中</div>
</div>

5. 常规流对齐居中

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        align-content: center;
        /* text-align: center; */

        .item {
            /* display: inline-block; */
            border: 1px solid red;
            width: fit-content;
            margin: auto;
        }
    }
</style>

<div class="box">
    <div class="item">居中</div>
</div>

6.IFC基线对齐居中

伪元素

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    font-size: 0;
    text-align: center;

    &::before {
        font-size: initial;
        content: '';
        background-color: red;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

    .item {
        font-size: initial;
        background-color: pink;
        display: inline-block;
    }
}
</style>
<div class="box">
<div class="item">居中</div>
</div>

行内级元素

<style>
    .box2 {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        text-align: center;
        font-size: 0;

        .item1 {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        .item2 {
            font-size: initial;
            display: inline-block;
            background-color: purple;
        }
    }
</style>
<div class="box2">
    <div class="item1"></div>
    <div class="item2">居中</div>
</div>

7.cell单元格居中

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        display: table-cell;
        vertical-align: middle;
        /* text-align: center; */

        .item {
            /* display: inline-block; */
            border: 1px solid red;
            width: fit-content;
            margin: auto;
        }
    }
</style>

<div class="box">
    <div class="item">居中</div>
    <div class="item">居中</div>
</div>

8.flex项目居中

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;

        .item {
            border: 1px solid red;
        }
    }
</style>

<div class="box">
    <div class="item">居中</div>
</div>

9.grid项目居中

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        display: grid;
        place-content: center;

        .item {
            border: 1px solid red;
        }
    }
</style>

<div class="box">
    <div class="item">居中</div>
</div>

10.锚定定位居中

<style>
    .anchor {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        anchor-name: --my-anchor;
    }

    .location {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        position-anchor: --my-anchor;
        position-area: center center;

    }
</style>

<body>
    <div class="anchor">锚点</div>
    <div class="location">定位</div>
</body>

最后

欢迎各大佬们补充更多方法。