css搞定所有垂直居中問題
阿新 • • 發佈：2017-10-09
ted round isp mar head cell tex oct meta
單行文本
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container{ border: 1px solid #000; height: 300px; line-height: 300px; } </style> <body> <div id="container"> 123123131 </div> </body> </html>
多行文本+圖片+任意大小的塊
後面提供的3個例子中，只要把裏面的#pic 的寬高去除，也是可以實現任意大小的div居中的。往裏面填充任意的多行文字，也是可以居中的。
實際上，有這樣的規律：
任意大小的div垂直居中 =》任意多行文字垂直居中 =》 固定大小的div垂直居中 =》圖片垂直居中
css3
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container{ border: 1px solid #000; height: 300px; display:-webkit-box; -webkit-box-align:center; /*上下對齊*/ -webkit-box-pack:center; /*左右對齊*/ } #pic{ display: inline-block; width: 100px; height: 100px; border: 1px solid #000; } </style> <body> <div id="container"> 123123131 <br> 33333333 <br> <div id="pic"></div> </div> </body> </html>
運行結果：
外部容器 tableCell（IE6不支持） + middle
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container{ border: 1px solid #000; height: 300px; display: table-cell; vertical-align: middle; } #pic{ display: inline-block; width: 100px; height: 100px; border: 1px solid #000; } </style> <body> <div id="container"> 123123131 <br> 33333333 <br> <div id="pic"></div> </div> </body> </html>
運行結果：
兼容ie6
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container{ border: 1px solid #000; height: 300px; } #pic{ display: inline-block; width: 150px; vertical-align: middle; border: 1px solid #000; } #container:before{ content:‘‘; display: inline-block; height: 100%; width: 0; vertical-align: middle; } </style> <body> <div id="container"> <div id="pic" contenteditable> 1231233 <br> 1231233 <br> 1231233 <br> 1231233 <br> 1231233 <br> 1231233 <br> </div> 1213 <br> </div> </body> </html>
運行結果：
水平居中（前者必須指定寬度）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container{ border: 1px solid #000; } #pic{ width: 100px; border: 1px solid #000; margin: 0 auto; } /*#container{*/ /*border: 1px solid #000;*/ /*text-align: center;*/ /*}*/ /*#pic{*/ /*display: inline-block;*/ /*border: 1px solid #000;*/ /*}*/ </style> <body> <div id="container"> <div id="pic">1</div> </div> </body> </html>
css搞定所有垂直居中問題