1、利用弹性盒子
将父元素设置为display:flex;
通过：
justify-content: center;
align-items: center;
来设置元素的垂直水平居中
2、将元素转化为表格的形式
父元素设置：
display: table-cell;
vertical-align: middle;
text-align: center;
子元素需设置：
display: inline-block;
vertical-align: middle;//消除行内块元素三像素问题
3、利用绝对定位
将父元素设置为相对定位
position:relative;
子元素设置绝对定位
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
4、利用translate
将父元素设置为相对定位
position:relative;
子元素设置绝对定位
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
子元素的宽高自己设置
5、利用 margin-top: ;和margin-left: ;
将父元素设置为相对定位
position:relative;
子元素设置绝对定位
position: absolute;
top:50%;
left:50%;
margin-top:-(自身高度的一半） ;
margin-left:-（自身宽度的一半） ;
例：
.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;文章来源：https://www.toymoban.com/news/detail-793192.html
margin-left: -50px;文章来源地址https://www.toymoban.com/news/detail-793192.html
到了这里，关于元素水平垂直居中的5种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
