单行文本
<!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; !*左右对齐*!*/ /*两种方式都可以居中*/ display: flex; align-items: center; /*垂直居中*/ justify-content: center; /*水平居中*/ } #pic{ display: inline-block; width: 100px; height: 100px; border: 1px solid #000; } </style> <body> <div id="container"> <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; height: 300px; justify-content:center; display: flex; flex-direction:column; } #pic{ display: inline-block; width: 100px; height: 100px; border: 1px solid #000; } </style> <body> <div id="container"> <br> 33333333 <br> <div id="pic"></div> </div> </body> </html>
运行结果：（往里面再套一个容器，实现水平居中，而容器是垂直居中，就可以实现内容屏幕居中了）
在flex布局之后比较新和重要的布局方式：grid
参考：https://juejin.im/entry/5894135c8fd9c5a19507f6a1
<style> #root{ display: grid; position: fixed; width: 100%; height: 100%; align-content:center; /*垂直居中*/ justify-content :center; /*水平居中*/ } </style> <body> <div id="root"> 1212313122 </div> </body>
水平居中（前者必须指定宽度）
<!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>