css 垂直居中

　　今天端午节，可苦逼的是还得加班，不过三倍工资，开心多了，第一次拿，想想心里似乎还有点小激动，好了，扯到为止，进入正题

　　今天偶然看到一个垂直居中的好方法，元素未知高度，未知高度，未知高度（重要的话说三遍），采用伪类 + vertical-align:middle 方式,

　　先上代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.main {
			 400px;
			height: 200px;
			background-color: #eee;
			text-align: center;
		}
		.main:after{
			display: inline-block;
			content: '';
			height: 100%;
			 0%;
			vertical-align: middle;
		}
		.con{
			display: inline-block;vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="con">test, 我是垂直居中的么？</div>
	</div>
</body>
</html>

　　父元素添加伪类，并将伪类width置为0，添加vertical-align:middle, 设置元素display： inline-block 或者 display： inline都可

　　这似乎是现在垂直居中的最好方法，既不用考虑浏览器版本的问题，也可以兼容大部分浏览器

　　原理：

　　　　1. 一个display：inline-block 元素高度等于父元素高度，垂直居中，后面的img元素也垂直居中，代码如下

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box{
　　300px;
　　height:200px;
　　background-color: #eee;
}
.box img {
　　 100px;
　　vertical-align: middle;
　　text-align: center;
}
.con {
　　display: inline-block;
　　 100px;height: 100%;
　　background-color: red;
　　vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
　　<div class="con">hello,波先生</div>
　　<img src="./test/0.jpg">
</div>
</body>
</html>

　　效果如图：

　　所以用伪元素占满父元素宽高，并垂直居中，即可实现垂直居中。

　　祝大家端午节快乐。。

　　本文参考：张鑫旭老师的 http://www.zhangxinxu.com/wordpress/?p=61