目录
一、前言
在日常开发网站界面或者是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
实现居中，方便且不用知道盒子宽高也可以实现。
这些就是常见的使元素垂直居中的方法。欢迎大家评论区讨论，一起学习。