已知或未知宽度的垂直水平居中

已知子元素宽高为100px

html代码1：

<div class="fu">
    <div class="zi"></div>
</div>

css代码1：

.fu {
    position: relative;
    width: 600px;
    height: 400px;
    background: blue;
}

.zi {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    background: red;
}

效果1：

css代码2：

* {
    box-sizing: border-box;
}
.fu {
    width: 600px;
    height: 400px;
    background: blue;
    padding: 50px 100px;
}

.zi {
    height: 100%;
    width: 100%;
    background: red;
}

效果2：

html代码3：

// 这段代码不是真正的水平居中，div设置成inline-block会产生空隙，所以.zi靠左边一点
<div class="fu">
    <div class="zi"></div>
    // class为zi2的div是个内容为空的元素
    <div class="zi2"></div>
</div>

css代码3：

.fu {
    width: 600px;
    height: 400px;
    background: blue;
    text-align: center;
}

.zi {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
    vertical-align: middle;
}

.zi2 {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}

效果3：

html代码4：

<div class="fu">
    <div class="zi">
        <ul>
            <li>001</li>
            <li>002</li>
            <li>003</li>
            <li>004</li>
            <li>005</li>
            <li>006</li>
            <li>007</li>
            <li>008</li>
            <li>009</li>
        </ul>
    </div>
</div>

css代码4：

.fu {
    width: 600px;
    height: 400px;
    background: blue;
    text-align: center;
}

.fu::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.zi {
    background: red;
    display: inline-block;
    vertical-align: middle;
    width: 100px;
}

ul {
    list-style: none;
}

效果4：

未知宽高

html代码1：

<div class="fu">
    <div class="zi">
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
            <li>6666</li>
            <li>7777</li>
            <li>8888</li>
            <li>9999</li>
        </ul>
    </div>
</div>

css代码1：

.fu {
    position: relative;
    width: 600px;
    height: 400px;
    background: blue;
}

.zi {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
}

ul {
    list-style: none;
}

效果1：

css代码2：

.fu {
    width: 600px;
    height: 400px;
    background: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zi {
    background: red;
}

ul {
    list-style: none;
}

效果2：