CSS实现元素垂直居中的几种方法

网页前端经常需要把元素垂直居中，下面总结几种方法。

1、不知道元素高度，利用定位和CSS属性transform实现元素垂直居中：

代码一：

parentElement{
	position:relative;
}

childElement{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

代码二：

parentElement{
	height:xxx;
}

.childElement {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

position:absolute;和position:relative;根据情况运用；

2、知道元素高度，利用定位和margin实现元素垂直居中：

parentElement{
	position:relative;
}

childElement{
	height:200px;
	position: absolute;
	top: 50%;
	margin-top:-100px;
}

3、不考虑兼容老式浏览器，利用 Flex 布局：

parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

4、利用display:table;表格框类型

parentElement{
	display:table;
	width:100%;
}

childElement{
	display:table-cell;
	verticle-align:middle;
}