<!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=UTF-8"> <script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css.css" type="text/css" </head> <body> <div class=‘content‘> <div class=‘inner‘> <div class=‘ele‘></div> </div> <div class=‘inner‘> <div class=‘ele‘></div> </div> <div class=‘inner‘> <div class=‘ele‘></div> </div> </div> <div class=‘middle_content‘> <div class=‘middle‘> <div class=‘line‘>方式1 使用新浏览器支持的属性 但是对IE不太好</div> </div> </div> <div class=‘middle_content2‘> <div class=‘middle2‘>方式2 针对于文字居中 使用vertical-align</div> </div> <div class=‘middle_content3‘> <div class=‘middle3‘> <div class=‘line‘>方式3 使用table-cell加vertical-align</div> </div> </div> <div class=‘middle_content4‘> <div id="floater"></div> <div class="middle4"> <div class=‘line‘>方式4 较为复杂 需要计算一下</div> </div> </div> </body> </html>
.content{ position: relative; width:330px; height:239px; margin-right:-4px; border: 1px solid black; } .inner{ position: relative; float: left; } .ele{ width: 50px; height: 20px; } .line{ height: 20px; width: 110px; background-color: green; } /*参考http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working*/ .middle_content{ width:330px; height:239px; margin-right:-4px; border: 1px solid black; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } .middle{ border: 1px solid black; height: 30px; } /*Setting the line-height to the same height as it‘s containing div will also work */ .middle_content2{ height: 72px; vertical-align: middle; border: 1px solid #000000; } .middle2{ line-height:72px; border: 1px solid #0d0d0d; } /*参考http://stackoverflow.com/questions/13979119/vertical-align-middle-not-working*/ .middle_content3{ width:330px; height:239px; margin-right:-4px; border: 1px solid black; display: table-cell; vertical-align: middle; } /*参考http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working*/ .middle_content4{ width:330px; height:240px; border: 1px solid black; } #floater { float: left; height: 50%; width: 100%; margin-bottom: -15px; } .middle4{ clear: both;/*清除浮动 没有这个你会发现middle4到了最顶上 因此 浮动应该是脱离文档流的*/ height: 30px; }
原文：http://www.cnblogs.com/cart55free99/p/3592843.html