前言：在很多情况下，我们要使用到内容的居中，这里的居中包括了垂直居中和水平居中，下面来浅谈一下
对于水平居中的属性text-align和垂直居中属性vertical-align的理解
（1）text-align
如果要实现水平居中，比如我们要实现块状元素(block)内，子元素的水平居中
<div class="div1"> <div class="div2"> </div> </div>
比如我们要实现div2元素在父元素div1内的居中，我们则会有：
.div2{
display:inline-block
}
并且要设置父元素的属性即：
.div1{
text-align:center
}
实现效果为：
关键：要实现这种水平居中，在设置父元素具有text-align:center属性的基础上，必须设置子元素（要居中
的元素）的display:inline-block或者display:inline，即只能实现行内块的水平居中。
（2）vertical-align
这里简单的说一下，vertical-align属性实现垂直居中
<div class="div1">
<div class="div2">
</div>
</div>
要实现div1父元素内的子元素div2，让div2实现垂直居中，我们可以这样设置：
.div1{
display:table-cell;
vertical-align:middle;
}
实现的效果为：
注：简单的实现垂直居中，我们可以发现并不需要对子元素进行特殊设置，我们只需要设置父元素的
display:table-cell;vertical-align:middle 之后就能实现垂直方向的居中。（这种方式实现的垂直居中，会
导致水平不居中）
(3)补充
1.父元素设置属性为text-align:center,并设置子类快为inline-block那么，子类3个块都会实现水平居中
2.父元素设置为line-height:= height: 并设置子类块属性为inline-block，那么子类的所有都能实现垂直居中
3.对于text-align:center,如果父类元素的display:inline-flex，则子元素不能实现水平居中
2017.1.13补充，line-height:100px设置行高，此时给定了基线，此时如果要实现居中，只需要让基线居中， 通过设置vertical-align:middle
align-items: center与 justify-content: center
display: flex;
align-items: center; /* 弹性盒子flex 元素位于容器的中心
设置弹性盒子元素在垂直方向上（纵轴）的对齐方式。*/
justify-content: center; /* 弹性盒子flex 元素位于容器的中心
设置弹性盒子元素在主轴（横轴）的对齐方式*/
display:table-cell属性简介
display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。
小结：
1. 不要与float：left; position:absolute; 一起使用
2. 可以实现大小不固定元素的垂直居中
3. margin设置无效，响应padding设置
4. 对高度和宽度高度敏感
5. 不要对display：table-cell使用百分比设置宽度和高度
原文链接：https://blog.csdn.net/qq_40281275/article/details/83614581
原文链接：https://blog.csdn.net/liwusen/article/details/51051079