（css）盒子水平、垂直居中方法

桃扇骨 2022-10-31 13:35 222阅读 0赞

## 利用定位和margin： ##

1、给要居中盒子的父盒子设置相对定位

2、给要居中的盒子设置固定定位

3、水平left、垂直top都设置为50%

4、利用margin，margin-top和margin-left各设置为负的自身宽高的一半

### 实例： ###

代码如下：

<!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>Document</title>
        <style>
            .bBox {
                width: 400px;
                height: 400px;
                background-color: aqua;
                position: relative;
            }
            
            .sBox {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
                background-color: tomato;
            }
        </style>
    </head>
    
    <body>
        <div class="bBox">
            <div class="sBox">
    
            </div>
        </div>
    </body>
    
    </html>

### 效果图： ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][] ###

## 利用弹性盒子的方法 ##

1、justify-content：

用于控制弹性元素在主轴上的排列方式

center 元素在主轴上居中。

2、

align-items

控制元素在侧轴上的排列方式。

center  中间对齐

实例：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221024/a0462e0307f94954acb36f293403ad86.png