居中一个元素(水平+垂直居中)

末蓝、 2023-10-15 10:44 52阅读 0赞

我们的示例代码全在此基础上修改：

......
    <style>
      *     {
                margin: 0;
                padding: 0;
            }
    
            .par {
                width: 600px;
                height: 400px;
                background-color: antiquewhite;
    
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            .chi1 {
                width: 60px;
                height: 40px;
                background-color: rgb(211, 205, 197);
            }
        </style>
    ............
    <div class="par">
            <div class="chi1">1</div>
        </div>

### 1.flex 弹性布局居中 ###

具体原理参考下面这篇博客：

[flex 弹性布局\_本郡主是喵的博客-CSDN博客][flex _-CSDN]

.par {
     ....
                display: flex;
                justify-content: center;
                align-items: center;
            }

### 2.垂直 + 水平居中内容 ###

对于内容是行内式元素(内容大小撑起标签宽高)或文字,是有效的。

line-heignt == height ,能使文字垂直对齐,text-align:center,能使内容居中水平对齐

.chi1 {
             
    .........
                text-align: center;
                line-height: 40px;
            }

### 3. 采用绝对布局 ###

父元素，采用相对布局，子元素采用相对布局。

我们利用方位属性，调至子元素相对于父元素的方位，达到居中的效果。

PS: top 和bottom，right 和left属性都是相对的，调整一个,另外一个都会失效。

.par {
    ......           
             position: relative;
            }
    
            .chi1 {
     .......
                position: absolute;
                top: 45%;
                left: 45%;
                /* bottom: 0;
                right: 0; */
            }

[flex _-CSDN]: https://blog.csdn.net/Qhx20040819/article/details/132075565