来至网络
1.使用绝对定位负边距居中
这个方法兼容性不错,缺点必须提前知道被居中快元素的高度,
2.使用绝对定位+负边距+transform
这个方法有个明显好久就是不必知道被居中元素的尺寸,应为transform中的translate偏移的百分比就是相对于元素自身的尺寸
3. 另外一种使用绝对定位和负外边距进行垂直居中的方式
这种方式的原理实质上和前面两种相同,补充一点,margin的取值也可以是百分比,这时这个值规定该元素的尺寸基于父元素尺寸的百分比
可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）
position:absolute 中的 left right 百分比 基于父元素的宽度
position:absolute 中的 top bottom 百分比 基于父元素的高度
这种有问题,需要去计算position的上下偏移量和margin的上下偏移量相等
4.绝对定位结合 margin auto
这种实现方式:垂直居中的元素相对于父元素绝对定位,top 和bottom 设置为相等的值,这里设置为0,,只要相等就行,这一步做完之后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。
被居中元素的宽高可以不设置,但是必须是图片这种自身就包含尺寸的元素,否则无法实现
5.使用padding实现元素的垂直居中
这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的
6.使用padding+box-sizing实现元素的垂直居中
和上面这种类似 只是 父元素可以设置高度,子元素继承 父元素
7.设置第三方基准
这种方式也非常简单，首先设置一个高度等于父元素高度一半的第三方基准元素，那么此时该基准元素的底边线自然就是父元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置一个margin-top，值的大小是它自身高度的一半取负，则实现垂直居中
8.使用flex 布局
align-items:cneter
9.flex 第二种 direction column 纵向排列 和justify-content center
这种方式也是首先给父元素设置display:flex，设置好之后改变主轴的方向flex-direction: column，该属性可能的取值有四个，分别如下：
row（该值为默认值）：主轴为水平方向，起点在左端；
row-reverse：主轴为水平方向，起点在右端；
column：主轴为垂直方向，起点在上沿；
column-reverse：主轴为垂直方向，起点在下沿。
justify-content属性定义了项目在主轴上的对齐方式，可能的取值有五个，分别如下（不过具体的对齐方式与主轴的方向有关，以下的值都是假设主轴为从左到右的）：
flex-start（该值是默认值）：左对齐；
flex-end：右对齐；
center：居中对齐；
space-between：两端对齐，各个项目之间的间隔均相等；
space-around：各个项目两侧的间隔相等。
10. 还有一种在前面已经见到过很多次的方式就是使用 line-height 对单行文本进行垂直居中
这里有一个小坑:line-height (行高)的值不能设置为100%我们来看看官方文档中给出的关于line-height取值为百分比时候的描述：基于当前字体尺寸的百分比行间距。所以大家就明白了，这里的百分比并不是相对于父元素尺寸而言，而是相对于字体尺寸来讲的。
11. 使用 line-height 和 vertical-align 对图片进行垂直居中
<div id="box"><img src="duncan.jpeg"></div>
#box
{ width: 300px; height: 300px; background: #ddd; line-height: 300px;
}
#box img { vertical-align: middle;
}
12. 使用 display 和 vertical-align 对容器里的文字进行垂直居中
13.使用vertical-align居中
使用 before 或者 在child 元素前面加一个 元素 设置宽度为0
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素a和b，a和b都是div，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
下面我们来看一张图来更好理解垂直对齐主要属性值的表现形式
14 使用display flex 子元素设置margin auto
15.display box
16. 清除浮动
这种方法，在 content 元素外插入一个 div。设置此 divheight:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间
优点：
适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现
