行內元素
如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。
html代碼：
XML/HTML Code復制內容到剪貼板
<body>
<div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body>
css代碼：
CSS Code復制內容到剪貼板
<style>
.txtCenter{
text-align:center;
}
</style>
塊狀元素
定寬塊狀元素
定寬塊狀元素：塊狀元素的寬度width為固定值。
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。
html代碼：
XML/HTML Code復制內容到剪貼板
<body>
<div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>
css代碼：
CSS Code復制內容到剪貼板
<style>
div{
border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置為 auto */
}
</style>
也可以寫成：
CSS Code復制內容到剪貼板
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以隨意設置的。
不定寬塊狀元素
1. 加入 table 標簽
利用table標簽的長度自適應性—即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 、、 )。
第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
html代碼：
新聞熱點
疑難解答
