1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>让未知宽高的元素水平垂直居中</title> 6 </head> 7 <style> 8 #wrap{ 9 display: table; 10 height: 400px; 11 } 12 #content{ 13 display: table-cell; 14 vertical-align: middle; 15 border:1px solid #FF0099; 16 background-color:#FFCCFF; 17 width:760px; 18 } 19 p{ 20 font-size:12px; 21 font-family:tahoma; 22 text-align: center; 23 } 24 </style> 25 <body> 26 <div id="wrap"> 27 <div id="content"> 28 <p>我要水平垂直居中，别管我有几行</p> 29 <p>我要水平垂直居中，别管我有几行</p> 30 <p>我要水平垂直居中，别管我有几行</p> 31 <p>我要水平垂直居中，别管我有几行</p> 32 <p>我要水平垂直居中，别管我有几行</p> 33 <p>我要水平垂直居中，别管我有几行</p> 34 </div> 35 </div> 36 </body> 37 </html>
