标签：rdp png highlight blog middle width alt ref 技术分享
今天端午节， 可苦逼的是还得加班，不过三倍工资，开心多了，第一次拿，想想心里似乎还有点小激动，好了，扯到为止，进入正题
今天偶然看到一个垂直居中的好方法，元素 未知高度，未知高度，未知高度（重要的话说三遍），采用 伪类 + vertical-align:middle 方式,
先上代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.main {
width: 400px;
height: 200px;
background-color: #eee;
text-align: center;
}
.main:after{
display: inline-block;
content: ‘‘;
height: 100%;
width: 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{
width:300px;
height:200px;
background-color: #eee;
}
.box img {
width: 100px;
vertical-align: middle;
text-align: center;
}
.con {
display: inline-block;
width: 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
标签：rdp png highlight blog middle width alt ref 技术分享
原文地址：http://www.cnblogs.com/ihboy/p/6913549.html
