text-align：'center' 這是針對內聯元素的，而margin：0 auto 則是針對塊級元素的居中方式。而且它們的使用物件不一樣。

我們看一下如下程式碼：

     <div style='text-align:center;width:500px;height:500px;border:1px red solid'> 
         <p>我們交個朋友吧！</p>
         <div  style='width:300px;'>好呀！你好，My new friend。</div>
     </div>

看一下效果

應該很明顯了吧，對於子div來說它並沒有因為text-align:center屬性而到中間去，而對於文字來說的確都居中了。

有人的會說，我有時寫的div也會居中呀，那是怎麼回事了。我們把子div的width去掉

     <div style='text-align:center;width:500px;height:500px;border:1px red solid'> 
         <p>我們交個朋友吧！</p>
         <div  >好呀！你好，My new friend。</div>
     </div>
 

原因應該很明顯了，並不是子div居中了而是它的寬度等於父親div,導致子div內部的文字視覺上居中了。

     <div style=' width:500px;height:500px;border:1px red solid'> 
         <p style='margin:0 auto'>我們交個朋友吧！</p>
         <div style=' width:300px;margin:0 auto' >好呀！你好，My new friend。</div>
     </div>

注意設定一下width屬性，不然width和父級一樣就看不出來了。內聯元素沒辦法設定width和hight屬性，除非修改display屬性。