垂直居中

水平居中

1. 文本、圖片等行內元素的水平居中

給父元素設置text-align:center能夠實現文本、圖片等行內元素的水平居中

1. 肯定寬度的塊級元素的水平居中

經過設置margin-left:auto;和margin-right:auto來實現

1. 不肯定寬度的塊級元素的水平居中（以分頁模塊爲例，ul li實現分頁）

1. 使用table

分頁的數量不肯定，因此不能經過設置寬度來限制，這樣的話方法2就沒法使用了，但能夠經過table標籤，table自己 並非塊級元素，它的寬度隨內部元素的寬度「撐起」,但即便不設定它的寬度，僅設置margin-left:auto;margin-right :auto就能夠實現水平居中，將ul包含在table內，對table設置margin-left:auto;margin-right:auto，就實現了水平居中

1. 塊級元素變行內元素，在使用text-align:center

將li的display:inline，ul設置text-align:center實現居中。將塊級元素改成行內元素，丟失了一些塊級元素的功能

1. 使用position:relative,激活left

經過父元素設置position:relative和left:50%，子元素設置position:relative和left:-50%.這樣保留了display:block的功能，但卻設置了position:relative，帶來了一些反作用

垂直居中

1. 父元素高度不肯定的文本、圖片、塊級元素的垂直居中

經過給父容器設置相同的上下內邊距實現。

1. 父元素肯定的單行文本垂直居中

經過給父元素設置line-height來實現，line-height值與父元素高度相同

1. 父元素高度肯定的多行文本、圖片、塊級元素垂直居中
1. vertical-align屬性

對於table中的td th能夠使用vertical-align（td標籤默認爲vertical-align:middle）,對於其餘塊級元素都不支持。

1. display:table-cell屬性

在ie8和Firefox能夠經過設置display:table-cell，激活vertical-align屬性（ie6 7不支持display:table-cell） 若是是ie6 ie7經過給父子兩層元素分別設置top:50%和top:-50%;來實現居中。

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

 

 

hello world hello world