行内元素实现水平垂直居中：
text-align: center;（text-align: center只能实现文本的垂直居中）
line-height: 50px;（line-height不能实现多行文本的垂直居中）
padding:50px;（不固定高度的垂直居中 通过设置padding实现）
使用display设置为table，配合样式vertical-align设置为middle来实现（基线对齐），如下：
父元素{
display：table；
}
子元素{
display：table-cell；
vertical-align：middle；
}
块级元素实现水平垂直居中：
第一种方式：使用弹性盒模型实现水平垂直居中
display: flex;
justify-content: center;
align-items: center;
第二种方式：采取绝对定位配合margin的方式实现（这种方式有缺陷 需要知道固定的宽度和高度才行）
position: absolute;
left:50%;
top:50%;
margin-left: -50px;（高度设置了100px，margin-left就是宽度的一半）
margin-top: -50px;（宽度也设置了100px，margin-top就是高度的一半）
第三种方式：可以采取借助css3的变形属性transform来实现的方式实现
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,50%);（在当前位置偏移自身宽高的一半）
第四种方式：需要盒子有宽高，但是不需要去计算偏移盒子的宽高
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
height:100px;
width:100px;
第五种方式：grid(网格布局)
给父级设置:display:grid;
给子元素设置:alig-self:center;
justify-self:center
第六种方法：absolute + calc(计算)
这种方法top的百分比是基于元素的左上角，那么再减去高度和宽度的一半就好
calc：CSS3新增的，任何长度值都可以通过calc()函数进行计算
标签：居中,center,top,50%,几种,垂直,margin,align From： https://www.cnblogs.com/ltwlh/p/16865550.html