目录
一、前言
在日常开发网站界面或者是App。小程序过程中，都会遇到将盒子水平垂直居中的需求。不同的需求需要我们采取不同的方法进行元素的水平垂直居中。
二、CSS盒子水平垂直居中的方法
1.display:flex弹性布局实现
| 属性 | 描述 |
| display | 指定HTML元素的盒子类型 |
| flex-direction | 指定弹性盒子中子元素的排列方式 |
| justify-content | 设置弹性盒子中元素在主轴方向上的排列方式 |
| align-items | 设置弹性盒子中元素侧轴方向上的对齐方式 |
通过给父盒子设置弹性布局实现水平垂直居中，代码示例如下
.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.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>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>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>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的值为子元素自身宽高的一半。
.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;
}至此，子元素达到了效果
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,
这些就是常见的使元素水平垂直居中的方法。欢迎大家评论区讨论，一起学习。