水平居中設置-行內元素
如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置?text-align:center?來實現的。如下代碼：
html代碼：
<body><div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</div> </body>
css代碼：
<style>div.txtCenter{text-align:center;}
</style> 水平居中設置-定寬塊狀元素
當被設置元素為塊狀元素時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
第一種方法：滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。我們來看個例子就是設置?div?這個塊狀元素水平居中：
html代碼：
<body><div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div> </body>
css代碼：
<style> div{border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/ width:500px;/*定寬*/margin:20px auto;/* margin-left 與 margin-right 設置為 auto */ } </style>
也可以寫成：
margin-left:auto; margin-right:auto;
注意：元素的“上下 margin” 是可以隨意設置的。
第二種方法：改變塊級元素的 dispaly 為 inline 類型，然后使用 text-align:center 來實現居中效果。如下例子：
html代碼：
<body>
<div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul>
</div>
</body> css代碼：
<style>
.container{text-align:center;
}
.container ul{list-style:none;margin:0;padding:0;display:inline;
}
.container li{margin-right:8px;display:inline;
}
</style> 這種方法相比第一種方法的優勢是不用增加無語義標簽，簡化了標簽的嵌套深度，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
方法三：通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中。
代碼如下：
<body>
<div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul>
</div>
</body> css代碼：
<style>
.container{ float:left;position:relative;left:50%
}.container ul{list-style:none;margin:0;padding:0; position:relative;left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style> 這種方法可以保留塊狀元素仍以 display:block 的形式顯示，優點不添加無語議表標簽，不增加嵌套深度，但它的缺點是設置了 position:relative，帶來了一定的副作用。
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
垂直居中-父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的?height?和?line-height?高度一致來實現的。如下代碼：
<div class="container">hi,imooc! </div>
css代碼：
<style>
.container{height:100px;line-height:100px;background:#999;
}
</style> 垂直居中-父元素高度確定的多行文本
父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入 table (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。
說到豎直居中，css 中有一個用于豎直居中的屬性 vertical-align，但這個樣式只有在父元素為 td 或 th 時，才會生效。所以又要插入 table 標簽了。下面看一下例子：
html代碼：
<body> <table><tbody><tr><td class="wrap"> <div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代碼：
table td{height:500px;background:#ccc}
因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。
?方法二：在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell，激活 vertical-align 屬性，但注意 IE6、7 并不支持這個樣式。
html代碼：
<div class="container"><div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p></div>
</div> css代碼：
<style>
.container{height:300px;background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style> 這種方法的好處是不用添加多余的無意義的標簽，但缺點也很明顯，它的兼容性不是很好，不兼容 IE6、7。
隱性改變display類型
有一個有趣的現象就是當為元素（不論之前是什么類型元素，display:none 除外）設置以下 2 個句之一：
- position : absolute
- float : left 或 float : right
元素會自動變為以?display:inline-block?的方式顯示，當然就可以設置元素的 width 和 height 了且默認寬度不占滿父元素。
如下面的代碼，a 標簽是行內元素，所以設置它的 width 是 沒有效果的，但是設置為 position:absolute 以后，就可以了。
<div class="container"><a href="#" title="">進入課程請單擊這里</a> </div>
css代碼
<style>
.container a{position:absolute;width:200px;background:#ccc;
}
</style> ————————————————————————————————————————————————————————————————————————————
以上內容參考自慕課網：http://www.imooc.com
