单行文本
<!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搞定所有垂直居中问题
原文地址：http://www.cnblogs.com/hellohello/p/7641886.html