实现水平垂直居中的4种解决方案

观看完整代码和示例效果：https://lucyzlu.github.io/Web/align-center.html

1.基于表格样式

将要使内容居中的外层容器元素的display设置成table，内层内容块使用table-cell，然后分别设置水平和垂直居中：

			/*表格方案*/
            #table-father{
        		display:table;
	        }
	        #table-child{
	        	display:table-cell;
	        	text-align:center;
	        	vertical-align:middle;
	        }

缺点是需要添加额外标记

另外，如果需要元素之间有间隔，

<div>
<span>
<span/>
<span>
text
</span>
</div>

设置父元素div的属性：
display:table
border-collapse:separate
border-spacing:5px//间距

设置子元素span
display:table-cell

2.基于绝对定位

如果要居中的元素宽高已知，可以利用负的margin，值是元素自身的宽度和高度的一半

  #child{
	    position: absolute;
	    left:50%;
	    top:50%;
	    margin-left:-50px;
	    margin-top:-50px;
	    width:100px;
	    height:100px;
	    background:gold;
  }

缺点是无法自适应，如果元素宽高是自适应百分比定义的，就不能用这种方法，因为margin采用百分比是相对于包含块的宽度而不是元素自身的宽度。

怎么解决元素自身宽高自适应改变情况下的居中呢？

有两种方法，一种利用transform属性，一种利用margin:auto

1.子元素设置position为absolute，相对于父元素进行定位，首先将子元素左上角定位到父元素中心，即使用top:50%和left:50%定位到中心，然后使用translate()相对于自身的高宽的一半进行移动，即可把自己的中心移到父元素的中心（这里可以使用margin-top和margin-left指定值进行移动操作，但是前提是需要知道子元素的高宽，如果子元素高宽由内容决定，那么就只能用translate，因为translate函数中的百分比是相对于元素自身的高宽来计算的），定位的缺点在于绝对定位可能影响布局，以及可能元素会显示模糊：

			/*绝对定位方案*/
	        #position-child{
	        	position:absolute;
	        	top:50%;
	        	left:50%;
	        	transform:translate(-50%,-50%);
	        }

或者2绝对居中，但如果是可变高度必须声明高度

				.absolute-center {  
				  margin: auto;  
				  position: absolute;  
				  top: 0; left: 0; bottom: 0; right: 0;  
				  width:50%;
				  height:50%;
				} 

3.基于视口单位

要把元素相对于视口进行居中，那么相当于父元素的高度就是视口的高度，视口的高度可以用vh来获取：

			/*相对于视口单位进行居中的解决方案*/
	        #view-child{
	        	margin:50vh auto 0;
	        	transform:translateY(-50%);
	        }

4.基于Flexbox

最佳方案是使用Flexbox，但是要考虑到浏览器的支持：

兼容性写法：

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

当父元素设置为display:flex后，子元素设置margin:auto就可以相对于父元素在垂直和水平方向进行居中：

			/*基于伸缩盒的解决方案*/
	        #flex-father{
	        	display:flex;

	        }
	        #flex-child{
	        	margin:auto;
	        }

如果不使用margin使用flex中的属性，父元素也可以写成：

			div#flex-father{
	        	display:flex;
                align-items:center;
                justify-content: center;
	        }

5.总结

垂直居中有四种方法：
1.基于表格样式，可以不使用表格元素而在需要内容居中的容器元素上设置display:table-cell以及text-align和vertical-align属性设置居中；
2.基于绝对定位，可能影响布局和出现显示模糊的问题
3.基于视口单位实现相对于视口居中
4.基于Flexbox，需要考虑浏览器支持

6.参考

1.《CSS揭秘》布局
2.flexbox兼容性查询
3.盘点8中垂直居中方法