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

╰半橙微兮° 2022-04-23 05:22 186阅读 0赞

**已知子元素宽高为100px**

html代码1：

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：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70][]

css代码2：

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

效果2：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 1][]

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：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 2][]

html代码4：

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：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 3][]

**未知宽高**

html代码1：

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：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 4][]

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：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70]: /images/20220323/1421f8feef36448cb88cc06178402766.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 1]: /images/20220323/fd022193ba0840e58fc1d8c8a3ead8a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 2]: /images/20220323/82ca1e4eca8a4e9ebe9aedef204d3ee1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 3]: /images/20220323/eea5777e80d84042a49bbc53fdf382c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 4]: /images/20220323/c8323c0caea147d0a1e10695242cde1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70 5]: /images/20220323/217f493b32c74474b660c89cd7fbc2c6.png