設定水平居中得分兩種情況：行內元素還是塊狀元素，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。
如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定text-align:center來實現的。
class="txtcenter">我想要在父容器中水平居中顯示。div>
body>
.txtcenter
style>
① 定寬塊狀元素（塊狀元素的寬度width為固定值）
滿足定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的。
我是定寬塊狀元素，哈哈，我要水平居中顯示。div>
body>
divstyle>
margin-left
:auto;
margin-right
:auto;
② 不定寬塊狀元素（塊狀元素的寬度width不固定）
為「不定寬度的塊狀元素」設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
我是第一行文字li>
我是第二行文字li>
我是第三行文字li>
ul>
td>
tr>
tbody>
table>
div>
table
/* 也可以寫為如下**,則不用加入table標籤 */
.center
style>
class="container">
href="#">1a>
li>
href="#">2a>
li>
href="#">3a>
li>
ul>
div>
body>
.container
/* margin:0;padding:0（消除文字與div邊框之間的間隙）*/
.container
ul/* margin-right:8px（設定li文字之間的間隔）*/
.container
listyle>
class="container">
href="#">1a>
li>
href="#">2a>
li>
href="#">3a>
li>
ul>
div>
body>
.container
.container
ul.container
listyle>
通過設定父元素的 height 和 line-height 高度一致來實現；
.container
style>
class="container">
hi,imooc!
div>
class="wrap">
看我是否可以居中。p>
div>
td>
tr>
tbody>
table>
body>
table td
.wrap
方法二：設定塊級元素的 display 為 table-cell（設定為**單元顯示），啟用 vertical-align 屬性
class="container">
看我是否可以居中。p>
看我是否可以居中。p>
看我是否可以居中。p>
div>
div>
.container
style>
position : absolute
float : left或float:right
a 標籤是行內元素，所以設定它的 width 是沒有效果的，但是設定為position:absolute以後，就可以了。
class="container">
href="#"
title="">進入課程請單擊這裡a>
div>
.container
astyle>
CSS樣式設定小技巧
我們在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。這裡我們又得分兩種情況 行內元素還是 塊狀元素 塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。我們先來了解一下行內元素怎麼進行水平居中？如果被設定元素為文字 等行內元素時，水平居中是通過給父元素設定...
css樣式設定的小技巧
水平居中設定 定寬塊狀元素 margin 0 auto 水平居中設定 不定寬度的塊狀元素 這三種方法目前使用的都很多 加入 table 標籤設定 display inline 方法 與第一種類似，顯示型別設為 行內元素，進行不定寬元素的屬性設定 設定 position relative 和 left...
CSS樣式設定小技巧 10
一 水平居中設定 行內元素 二 水平居中設定 定寬塊狀元素 三 水平居中設定 不定寬塊級元素 四 垂直居中 父元素高度確定的單行文字 五 隱性改變display型別 1.我們在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。這裡我們又得分兩種情況 行內元素 ...