CSS 盒子垂直居中的方法

以你之姓@ 2023-10-12 09:53 60阅读 0赞

**目录**

一、前言

二、CSS盒子垂直居中的方法

2.1.display:flex弹性布局实现

2.2.display:grid网格布局实现

2.3.table表格布局实现

2.4.定位+margin:auto实现

2.5.定位+margin:负值

2.6.定位+transform

三、小结

--------------------

## 一、前言 ##

在日常开发网站界面或者是App。小程序过程中，都会遇到将盒子水平垂直居中的需求。不同的需求需要我们采取不同的方法进行元素的水平垂直居中。

在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都**居中**，内容不仅限于文字，可能是图片或其他元素

## 二、CSS盒子垂直居中的方法 ##

#### 2.1.display:flex弹性布局实现 ####

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:157px;">属性</td> 
   <td style="width:341px;">描述</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">display</td> 
   <td style="width:341px;">指定HTML元素的盒子类型</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">flex-direction</td> 
   <td style="width:341px;">指定弹性盒子中子元素的排列方式</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">justify-content</td> 
   <td style="width:341px;"> <p>设置弹性盒子中元素在主轴方向上的排列方式</p> </td> 
  </tr> 
  <tr> 
   <td style="width:157px;">align-items</td> 
   <td style="width:341px;">设置弹性盒子中元素侧轴方向上的对齐方式</td> 
  </tr> 
  <tr> 
   <td style="width:157px;"> <p>flex-flow</p> </td> 
   <td style="width:341px;"> <p>flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap</p> </td> 
  </tr> 
  <tr> 
   <td style="width:157px;"> <p>align-content</p> </td> 
   <td style="width:341px;"> <p>用于控制多行项目的对齐方式</p> </td> 
  </tr> 
 </tbody> 
</table>

通过给父盒子设置弹性布局实现水平垂直居中，代码示例如下

.father {
                    width: 200px;
                    height: 200px;
                    background: red;
                    display: flex;
                    /* 实现水平方向上居中 */
                    justify-content: center;
                    /* 实现垂直方向居中 */
                    align-items: center;
                }
                .son {
                    width: 100px;
                    height: 100px;
                    background: green;
                }
                
                <div class="father">
                    <div class="son"></div>
                </div>

实现效果如下:

![c03cfc3f3c3b415284e9dde6f995d3f7.png][]

#### 2.2.display:grid网格布局实现 ####

和弹性布局实现思路一样,直接给父盒子设置为网格布局即可

.father {
                    width: 200px;
                    height: 200px;
                    background: red;
                    display: grid;
                    /* 实现水平方向上居中 */
                    justify-content: center;
                    /* 实现垂直方向居中 */
                    align-items: center;
                }
                .son {
                    width: 100px;
                    height: 100px;
                    background: green;
                }
    
                <div class="father">
                    <div class="son"></div>
                </div>

#### 2.3.table表格布局实现 ####

通过父元素为display:table-cell,将子元素设置为display:inline-block。

.father {
                    width: 200px;
                    height: 200px;
                    background: red;
                    display: table-cell;
                    /* 垂直方向居中 */
                    vertical-align: middle;
                    /* 水平方向居中 */
                    text-align: center;
                }
                .son {
                    display: inline-block;
                    width: 100px;
                    height: 100px;
                    background: green;
                }
                <div class="father">
                    <div class="son"></div>
                </div>

#### 2.4.定位+margin:auto实现 ####

通过**子绝父相**，并且给子元素**（left,top,right,botton）**都设置为0，那么此时若不给子元素设置宽高，子元素就实现了自适应。

> 大家可以仔细想以下，当给这四个属性的两个设置时，固定了两侧的位置，就确定了子元素的位置，而当将四个属性都设置值时，就确定了该元素的宽高。

.father {
                    width: 200px;
                    height: 200px;
                    position: relative;
                    background: red;
                }
                .son {
                    width: 100px;
                    height: 100px;
                    background: green;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }
    
                <div class="father">
                    <div class="son"></div>
                </div>

#### 2.5.定位+margin:负值 ####

通过子绝父相确定子元素的位置，再通过margin移动子元素达到子元素水平垂直居中的效果

具体实现思路如下:

先给父元素设置为相对定位，再对子元素设置绝对定位，top:50%,left:50%,代码如下

.father {
                    width: 200px;
                    height: 200px;
                    position: relative;
                    background: red;
                }
                .son {
                    width: 100px;
                    height: 100px;
                    background: green;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                }

**但此时的没有达到我们想要的效果**

![de38e5c6803745549d2f4f5b64e33952.png][]

但是我们此时如果再使用margin 对子元素的位置进行调整，就可以达到子元素水平垂直居中的效果，**margin-left**的值为子元素自身宽度的一半。**margin-top**的值为子元素自身高度的一半。

.father {
                    width: 200px;
                    height: 200px;
                    position: relative;
                    background: red;
                }
                .son {
                    width: 100px;
                    height: 100px;
                    background: green;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -50px;
                    margin-top: -50px;
                }

**至此，子元素达到了效果**

![958dfb0cb7c443bfa0388c959a0c5546.png][]

#### 2.6.定位+transform ####

和5.定位+margin思路相同，都是通过绝对定位初步确定位置，然后再根据 transform调整位置，利用transform(-50%,-50%)宽高都位移子元素自身宽高的一半

.father {
                    width: 200px;
                    height: 200px;
                    position: relative;
                    background: red;
                }
                .son {
                    width: 100px;
                    height: 100px;
                    background: green;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

## 三、小结 ##

当我们不知道元素的宽高时，我们仍可以实现水平垂直居中的方法:**flex布局,grid布局,定位+auto,定位+transform。**

我们最常用的是**margin:0 auto 和 弹性盒子flex**实现居中，方便且不用知道盒子宽高也可以实现。

**这些就是常见的使元素垂直居中的方法。欢迎大家评论区讨论，一起学习。**

[c03cfc3f3c3b415284e9dde6f995d3f7.png]: https://img-blog.csdnimg.cn/c03cfc3f3c3b415284e9dde6f995d3f7.png
[de38e5c6803745549d2f4f5b64e33952.png]: https://img-blog.csdnimg.cn/de38e5c6803745549d2f4f5b64e33952.png
[958dfb0cb7c443bfa0388c959a0c5546.png]: https://img-blog.csdnimg.cn/958dfb0cb7c443bfa0388c959a0c5546.png