最近在研究关于响应式的网页，对应使用百分比的宽高有点混乱，故查询了很多资料，现记录下来当中笔记，便于以后查看！
1.利用vertical-align:middle
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 body{margin: 0;}
8 .father{ 100%;height: 100%;position: fixed;left: 0;top: 0;text-align: center;font-size: 0;/*设置font-size为了消除代码换行所造成的空隙*/background:rgba(0,0,0,0.5); }
9 .daughter{vertical-align: middle;}/*实现daughter居中*/
10 .son{vertical-align: middle;display:inline-block;height: 100%;}
11 </style>
12 </head>
13 <body>
14 <div class = "father">
15 <div class="son"></div>
16 <img class = "daughter" src="1.jpg" alt="我要居中">
17 </div>
18 </body>
19 </html>
2.使用transform实现
1 <style>
2 body{margin: 0;}
3 .father {position: absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);background:rgba(0,0,0,0.5); }
4 </style>
5 <div class="father">
6 <img src="1.jpg">
7 </div>
3.弹性盒模型
1 <style>
2 body{margin: 0;}
3 .father{position:fixed; 100%; height:100%; background:rgba(0,0,0,0.5); left:0px; top:0px;display:flex;justify-content:center;align-items:center;}
4 </style>
5
6
7 <div class="father">
8 <img src="1.jpg">
9 </div>
4.用表格布局
1 <style>
2 *{margin:0px; padding:0px;}
3 table {position:absolute; 100%; height:100%; text-align:center; background:rgba(0,0,0,0.5);}
4 .daughter {display:inline-block;}
5 </style>
6 <table>
7 <tr>
8 <td>
9 <div class="daughter">
10 <img src="1.jpg">
11 </div>
12 </td>
13 </tr>
14 </table>
引用http://www.cnblogs.com/crystalmoore/p/5041522.html