Six ways to center horizontally and vertically without knowing the width and height of child elements :

In actual use, it is best to test whether the minimum version supports the corresponding implementation method, and try to choose the best support for each browser, or the most common implementation method.

1. Implemented by flexible box layout (flex).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: #00affc;
    }

    .box1 {
        background: pink;

    }
</style>

<body>
    <div class="box">
        <div class="box1">
            中间盒子水平垂直居中了
        </div>
    </div>
</body>

</html>

Browser Compatibility:

2. Absolute positioning + transform

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .box {
        width: 100%;
        height: 100%;
        background: #00affc;
    }

    .box1 {
        background: pink;
        transform: translate(-50%, -50%);
        position: absolute;
        top: 50%;
        left: 50%;

    }
</style>

<body>
    <div class="box">
        <div class="box1">
            中间盒子水平垂直居中了
        </div>
    </div>
</body>

</html>

Browser Compatibility:

3. Table label

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    table {
        width: 100%;
        height: 100%;
    }

    .box {
        background: #00affc;
    }

    .box1 {
        text-align: center;
    }
</style>

<body>
    <table>
        <tbody>
            <tr>
                <td class="box">
                    <div class="box1">中间盒子水平垂直居中了</div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Compatibility: Basically all are supported, but it is cumbersome to write and multi-layer nested.

4、display：table-cell

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

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

    .box1 {
        display: inline-block;
    }
</style>

<body>
    <div class="box">
        <div class="box1">中间盒子水平垂直居中了</div>
    </div>
</body>

</html>

Browser Compatibility: Basically all major browsers support it.

5、display: grid

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    html,
    body,
    .box {
        width: 100%;
        height: 100%;
    }

    .box {
        display: grid;
    }

    .box1 {
        align-self: center;
        justify-self: center;
    }
</style>

<body>
    <div class="box">
        <div class="box1">123123</div>
    </div>

</body>

</html>

Browser Compatibility: The latest mainstream browsers are basically compatible, and there may be compatibility issues with older versions of browsers.

6. The writing-mode attribute

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    html,
    body,
    .content {
        width: 100%;
        height: 100%;
    }

    .content {
        writing-mode: vertical-lr;
        text-align: center;
    }

    .box {
        writing-mode: horizontal-tb;
        display: inline-block;
        text-align: center;
        width: 100%;
    }

    .box1 {
        display: inline-block;
        margin: auto;
        text-align: left;
    }
</style>

<body>
    <div class="content">
        <div class="box">
            <div class="box1">123123</div>
        </div>
    </div>

</body>

</html>

Browser Compatibility Issues:

How to center horizontally and vertically in CSS