<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>块级元素居中问题</title> <style type="text/css"> .one{ width:100px; margin:0 auto; background:#ff6699; } .two{ margin:0 auto; background:#ff3366; } .t-parent{ text-align:center; } .three{ display:inline; background:#3333ff; } .f-parent{ position:relative; float:left; left:50%; } .four{ position:relative; left:-50%; background:#000033; } </style> </head> <body> <!--给宽度 直接设置margin:0 auto;--> <div class="one">定宽块级元素水平居中</div> <!--table 标签是根据里面的文本来撑开的 有文字就有宽度 在设置 margin:0 auto;--> <table class="two"> <tr> <td> <div >不定宽块级元素水平居中</div></td> </tr> </table> <!--父元素 设置 text-align:center 子元素 设置为inline--> <div class="t-parent"> <div class="three">不定宽块级元素水平居中</div> </div> <!-- 父元素设置 position:relative; float:left; left:50%; 子元素设置 position:absolute; float:-50%; --> <div class="f-parent"> <div class="four">不定宽块级元素水平居中</div> </div> </body> </html>