前些天在W3CPlus看到了一篇文章,提到用CSS制作水平垂直居中,在测试其中的第六点时发现了一些小问题: 添加了一个无意义的新标签 复制代码代码如下: <div id="extra"> 当设定内容宽度的时候,文本换行了 对于第一点,解决的办法是使用 :before 伪元素 : 复制代码代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>水平垂直居中</title> <style> .wrapper { width: 200px; height: 200px; background: skyblue; } .wrapper:before { content: .; display: inline-block; vertical-align: middle; height: 100%; } .content { display: inline-block; text-align: center; } </style> </head> <body> <div class="wrapper"> <div class="content">多行文字居中 多行文字居中 多行文字居中 </div> </div> </body> </html> 附Demo 但是!大家也都注意到了:文本换行了 这便是inline-block产生的空隙在捣乱了 为了解决这个问题,可以试试这个hack: 复制代码代码如下: .wrapper { font-size:0 } .content { font-size:16px } 保存再看看: 搞定! 附完整源码 参考资料(推荐阅读): CSS制作水平垂直居中对齐 如何解决inline-block元素的空白间距 inline-block 前世今生