园子开辟好长一段时间了，一直都没有开始写一篇文章。今天面试的时候提及到写个技术博客，于是产生了七个月以来的第一篇博文。从这一篇文章开始，计划将此博客用于个人总结和记录，写下学习过程中遇到的问题和解决方法。
唠叨完，开始正文内容，如何用html/css使得未知宽高的元素水平垂直居中？这也是今天在笔试时候遇到的一道题目。下面给出几种解决方法。
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{width: 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; width: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; width: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>
欢迎指导~~2015-12-12 17:16:44