- 办法一：行高法
- 办法二：内边距法
- 办法三：CSS3的box办法
- 办法四： 相对定位法
- 办法五：模仿表格法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>DIV中的元素程度垂直居中</title><style>#wrap{width:990px; height:400px;background:#CCCCCC;}#wrap{position:absolute;left:50%;top:50%;margin-left:-495px;margin-top:-200px}#wrap2{width:200px; margin:0 auto; padding-top:35px;}/*办法一：行高法*/#box{ width:200px; height:50px; background: #FFCC00;margin-bottom:20px; position:relative; font-size:16px;}.box1{line-height:50px; text-align:center;}/*办法二：内边距法*/.box2{width:200px;font-size:16px; background:#FFCC00; margin:20px 0;} .box2{text-align:center; padding:16px 0px;}/*办法三：CSS3的box办法*/.box3{ justify-content:center; align-items:center; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; -o-box-align: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; -ms-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center;}/*办法四:相对定位法*/.div4{position: absolute;left: 50%;top:50%;display:block;margin-top:-8px;margin-left:-40px;}/*办法五: 模仿表格法*/.div5{display:table;}.div5a{display:table-cell; vertical-align:middle; text-align:center;}</style></head><body><div id="wrap"> <div id="wrap2"> <div id="box" class="box1">行高法居中</div> <div class="box2">内边距法居中</div> <div id="box" class="box3">CSS3中的box法</div> <div id="box" ><span class="div4">相对定位法<span></div> <div id="box" class="div5" ><div class="div5a">模仿表格</div></div></div></div></body></html>