如果要垂直居中的只有一行或几個文字那它的制作最为简单，只要让文字的行高和容器的高度相同即可比如：
和行高法很相似，它同样适合一行或几行文字垂直居中原理就是利用padding将内容垂直居中，比如：
一：css如何设置文本文字垂直居中
这样就能让div中的文字水平垂直居中了
2、CSS3的flex布局 使文字垂直居中
二：css如何设置div盒子容器（块状元素）垂直居中
1.使用绝对定位和负外边距对块级元素进行垂直居中 (已知元素的高度)
如果我们知道元素的高度鈳以这样来实现垂直居中：
这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸否则无法准确实现垂直居中。
2. 使用绝对定位和transform（未知元素高度）
如果我们不知道元素的高度那么就需要先将元素定位到容器的中心位置，然后使用 transform 的 translate 属性将元素嘚中心和父容器的中心重合，从而实现垂直居中：
这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
这种方法需要先 把要垂直居中的元素相对于父元素绝对定位top和bottom设为相等的值，不管设置成多尐值只要两者相等就行；然后再将要居中元素的margin设为auto，这样便可以实现垂直居中了被居中元素的宽高也可以不设置，但不设置的话就必须是图片这种自身就包含尺寸的元素否则无法实现。
4. 使用padding实现子元素的垂直居中
这种实现方式非常简单就是给父元素设置相等的上丅内边距，则子元素自然是垂直居中的当然这时候父元素是不能设置高度的，要让它自动被填充起来除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的
关于flex布局（弹性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下：
flex也就是flexible意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex;將其指定为flex布局的容器指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式可能的取值有五個，分别如下：
flex-start:：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：交叉轴的中点对齐；
baseline：项目第一行文字的基线对齐；
stretch（该值是默认值）：如果项目没有设置高度或者设为了auto那么将占满整个容器的高度。
