css中实现水平垂直居中的几种方式

水平居中 （1）使用inline-block+text-align <div class="parent"> <div class="child">demo</div> </div>

	.child {
			 display:inline-block;
		}
		.parent {
			 text-align:center
		}
	
	原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
	优点：兼容性好，甚至可以兼容ie6、ie7

	(2)使用table+margin
		.child {
			display:table
			margin:0 auto;
		}
原理：先将子框设置为块级表格来显示，再设置子框居中以达到水平居中。
缺点：不支持ie6、ie7,将div换成table

（3）使用absolute+transform
	.child {
				 position:absolute;
				 left:50%;
				 transform:translateX(-50%)
		}
		.parent {
				  position:relative
		}
		
缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

(4)使用flex+margin
		.child {
		  margin:0 auto
		}
		.parent {
				display:flex
		}
缺点：低版本浏览器(ie6 ie7 ie8)不支持

(5)使用flex+justify-content
	.parent {
				display:flex;
				justify-content:center
		}
	缺点：低版本浏览器(ie6 ie7 ie8)不支持
	
	垂直居中
	(1)使用table-cell+vertical-align

		.parent {
				display:table-cell；
				vertical-align:middle
		}
		
	(2)使用absolute+transform
		.child {
		  position:absolute;
			top:50%;
			transform:translateY(-50%)
		}
		.parent {
				position:relative
		}
缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

    (3)使用flex+align-items
		.parent {
			display:flex;
			align-items:center;
		}
	
	水平垂直居中
	(1)使用absolute+transform(未知高度)
	.parent {
			position:relative;
		}
	.child {
			position:absolute;
			left:-50%;
			top:-50%
			transform:translate(-50%,-50%)
		}
	(1.1)使用absolute+transform(已知高度)
	.parent {
			position:relative;
		}
	.child {
			position:absolute;
			width:100px;
			height:100px;
			left:-50%;
			top:-50%
		  margin: -50px 0 0 -50px;
		}
		
		(2)使用inline-block+text-align+table-cell+vertical-align
		.parent {
			text-align:center;
			display:table-cell;
			vertical-align:middle;
		}
		.child {
				display:inline-block;
		}
		优点：兼容性较好
		
		(3)使用flex+justify-content+align-items
		.parent {
			display:flex;
			justify-content:center;
			align-items:center;
		}
		缺点：兼容性存在一定问题