一、前言
在日常开发网站界面或者是App。小程序过程中，都会遇到将盒子水平垂直居中的需求。不同的需求需要我们采取不同的方法进行元素的水平垂直居中。
在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素
二、CSS盒子垂直居中的方法
2.1.display:flex弹性布局实现
| 属性 | 描述 |
| display | 指定HTML元素的盒子类型 |
| flex-direction | 指定弹性盒子中子元素的排列方式 |
| justify-content | 设置弹性盒子中元素在主轴方向上的排列方式 |
| align-items | 设置弹性盒子中元素侧轴方向上的对齐方式 |
flex-flow |
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap |
align-content |
用于控制多行项目的对齐方式 |
通过给父盒子设置弹性布局实现水平垂直居中，代码示例如下
.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>
实现效果如下:
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%; }
但此时的没有达到我们想要的效果
但是我们此时如果再使用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; }
至此，子元素达到了效果
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实现居中，方便且不用知道盒子宽高也可以实现。
这些就是常见的使元素垂直居中的方法。欢迎大家评论区讨论，一起学习。
