css实现水平垂直居中常用的方法

1. margin + transform 实现

这种方法比较容易实现，缺点是 transform 有兼容性，IE低版本不能使用，现在浏览器基本没有问题

css代码

        /* 基本样式代码 */
		.bg-black{
			background: #000000;
		}
		.bg-white{
			background: #FFFFFF;
		}
		.parent{
			width:100px;
			height: 100px;
			border:1px solid #000000;
		}
		.child{
			width:50px;
			height: 50px;;
		}
		/* 水平垂直居中 */
		.vertical-align-center{
			margin-top: 50%;
			margin-left: 50%;
			transform: translate(-50%,-50%);
		}

代码

		<div class="bg-black parent">
				<div class="bg-white child align-center vertical-align-center"></div>
		</div>

效果图

2. display:inline-block + text-align:center + vertical-align + line-height 实现

看着比较麻烦，实则很简单，主要使用了行高，缺点是高度需要计算，而且改变了块的display属性

		/* 基本样式代码 */
		.bg-black{
			background: #000000;
		}
		.bg-white{
			background: #FFFFFF;
		}
		.parent{
			width:100px;
			height: 100px;
			border:1px solid #000000;
			/* 字体为0是必须的，要不不会完全居中 */
			font-size: 0px;
			text-align: center;
			/* 与父级元素高度一样 */
			line-height: 100px;
		}
		.child{
			width:50px;
			height: 50px;
			/* 子元素的相关设置 */
			display: inline-block;
			vertical-align: middle;
		}

	<div class="bg-black parent">
		<div class="bg-white child"></div>
	</div>

一样的效果

3.display:table + vertical-align 来实现

这个方法缺点也是改变了元素的display 属性 ， 这个方法还有几点需要注意

1. 父级元素设为 display:table , 子级元素设为 display:table-cell 子级元素对宽高不敏感，自动撑满整个父级
2. 单纯的对元素设置 display:table-cell 对非百分比的宽高敏感
3. 这个方法多用来实现多行文本的水平垂直居中

		/* 基本样式代码 */
		.bg-black{
			background: #000000;
		}
		.bg-white{
			background: #FFFFFF;
		}
		.parent{
			width:100px;
			height: 100px;
			border:1px solid #000000;
			/* 父元素的相关设置 */
			display: table;
		}
		.child{
			/* 此时设置宽高是无效的，自动撑满父级 */
			width:60%;
			height: 50px;
			/* 子元素的相关设置 */
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		/* 水平垂直居中 */
		/* 此时 .child中的元素都水平垂直居中 */

	<div class="bg-black parent">
		<div class="bg-white child">
			<div>123<br>123</div>
		</div>
	</div>

子元素自动撑满了父级，并且，子元素内的 div 还有文本都水平垂直居中了

4. flex布局实现垂直水平居中

缺点就是兼容性不高，使用了css3高级属性，flex。优点就是实现起来相当简单

		/* 基本样式代码 */
		.bg-black{
			background: #000000;
		}
		.bg-white{
			background: #FFFFFF;
		}
		.parent{
			width:100px;
			height: 100px;
			border:1px solid #000000;
			
			/* 对父级进行设置，相当简单 */
			display: flex;
			align-items: center;
			justify-content: center;
			
		}
		.child{
			width:50px;
			height: 50px;
		}

	<div class="bg-black parent">
		<div class="bg-white child"></div>
	</div>

先介绍这几种，还有很多方法，以后再慢慢补充。