這兩種方式都可以在一定條件下實現居中效果，那么如何進行區分呢？
1、先說text-align:center使行內元素居中條件：
text-align:center，水平居中是通過給父元素設置 text-align:center 來實現行內元素居中，比如行內的文字，行內的圖片（非塊狀元素）
比如：
html代碼：
<body> <div class="txtCenter"><img src="#"></div> </body>
css代碼：
<style>
.txtCenter{
text-align:center;
}
</style>2、再說margin:0 auto使塊狀元素居中（必須定寬）：
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中：
html代碼：
div{
border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/
width:300px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置為 auto */
}
<div>我要水平居中顯示。</div>