以前看到dlee讲过,将line-height设置为与DIV的高度相同就可以居中<style type="text/css"> <!-- .con_div{ width:400px; height:300px; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle; background:red; color:#fff; line-height:300px; } --> </style> <div class="con_div"> 测试内容ddddddddddd </div> [提示:你可先修改部分代码,再按运行]
今天又在这里看到的一种方法,使用了CSS的vertical-align属性? <style type="text/css"> <!-- .con_div{ width:400px; height:300px; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle; background:red; color:#fff } /*FOR IE*/ .fixie{ width:0; height:100%; display:inline-block; vertical-align:middle; } --> </style> <div class="con_div"> <span class="fixie"></span> 测试内容 </div> [提示:你可先修改部分代码,再按运行]
再次看到一种 <style> #warp { position: absolute; width:500px; height:200px; left:50%; top:50%; margin-left:-250px; margin-top:-100px; border: solid 3px red; } </style> <body> <div id=warp>Test</div> </body> [提示:你可先修改部分代码,再按运行]