一、行內元素水平居中
如下：
行內元素在父容器中水平居中顯示。
二、塊狀元素水平居中
當被設定元素為塊狀元素時，text-align:center 就不起作用了，此時分兩種情況：定寬塊狀元素和不定寬塊狀元素。
1、定寬塊狀元素（塊狀元素的寬度width為固定值）
方法：滿足定寬和塊狀兩個條件的元素可以通過設定「左右margin」值為「auto」來實現居中
如下：
定寬塊狀元素水平居中。
2、塊狀不定寬元素
方法：
①設定 margin:0 auto; display:table;
②設定display:inline方法。改變塊級元素的display為inline型別（設定為行內元素顯示），然後使用text-align:center來實現居中效果
③設定position:relative;left:50%，利用相對定位的方式，將元素向左偏移50%。通過給父元素設定float，然後給父元素設定position:relative和left:50%，子元素設定position:relative和left:-50%來實現水平居中
方法①如下：
不定寬塊狀元素水平居中
.wrap
不定寬塊狀元素水平居中。
.wrap-center
.wrap
HTML 元素水平垂直居中
方案一 div絕對定位水平垂直居中 margin auto實現絕對定位元素的居中 相容性 ie7及之前版本不支援 div方案二 div絕對定位水平垂直居中 margin 負間距 這或許是當前最流行的使用方法。div方案三 div絕對定位水平垂直居中 transforms 變形 相容性 ie8不支援 ...
html 元素水平居中方式
本文將簡單敘述元素居中的基本方法。區 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title center title 67 head 8 body 9 h1 style text align center html中元素的...
Html 元素水平居中方案總結
先來看我乙個簡單xhtml html檔案 部分 我們的目的是讓 container水平居中。lorem ipsum dolor sit amet,consectetuer adipiscing elit.phasellus varius eleifend.使用自適應邊界 auto margin 水平...