本文將簡單敘述元素居中的基本方法。
**區：
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中元素的水平居中方式
h1>
10<
p style
="text-align: center;"
>行內元素
p>
11<
div
style
="margin: 0 auto; width: 200px; text-align: center;"
>定寬塊元素
div>
12<
table
align
="center"
>
13<
tr>
14<
td>
15<
div>不定寬塊元素，方法1
div>
16td
>
17tr
>
18table
>
19<
div
style
="text-align: center;"
>
20<
div
style
="display: inline-block;"
>不定寬塊元素，方法2
div>
21div
>
22<
div
style
="height: 30px;"
>
23<
div
style
="float: left; position: relative;left: 50%;"
>
24<
div
style
="position: relative;left: -50%;"
>不定寬塊元素，方法3
div>
25div
>
26div
>
27div
>
28html
>
一、需要進行水平居中的元素分類：
1，行內元素（不定寬）。
2，定寬塊元素。
3，不定寬塊元素。
二、基本居中方式：
1，行內元素：text-align：center；
2，定寬塊元素：margin：0 auto；
三、不定寬塊元素：
1.轉化為定寬塊元素：把元素封裝在table中；table元素會隨內容改變寬度，而其寬度值可以被獲取到，則可以把table看作為定寬的塊元素。
**實現：
align-center
2.轉化為行內元素：把元素封裝在乙個塊父元素中（寬度不影響）；把元素設定成行內元素，把父元素設定居中屬性（父元素中的子元素根據父元素的大小進行居中，而不是父元素進行居中）。
**實現：
align-center
3.使用三層結構，position屬性：結構 great-parent>parent>div;great-parent為居中的參考體，parent向右偏移50%（以great-parent為基準），div向左偏移50%（以parent為基準）。
**實現：
style=「float：left；//獲取內容區的寬；
position：relative；left：50%；」>
left：-50%；」>align-center
*思路：
great-parent參考體；parent父容器；div內容；
1.parent的寬度=div的寬度；
2.patent以great-parent的寬度為基值，向右偏移50%；這時，parent和div的基線（左側臨界線）到達great-parent的中軸線；
3.div以parent的寬度為基值，向左偏移50%；因為parent的寬度=div的寬度，所以div的中軸線和parent的基線以及great-parent的中軸線重合，到達div居中於great-parent的效果。
*難點：float的作用；
由於未設定寬度值的塊元素，載入時會繼承父元素的寬度值，
一開始所有的元素的寬度值都等於great-parent的寬度；
當執行「float=left；」時，parent的寬度值會被重新賦值，
該值來自其內容的寬度；
parent中只有div，瀏覽器會計算div的大小，而div自身也沒有設定寬度值，則繼續計算div內部內容的大小，div內部有字元或者其他內容，div將計算這些內容的顯示大小；
然後，div把這個值往上逐級返回到瀏覽器，瀏覽器再把這個值賦給parent的寬度值。
最後，由於parent的寬度值被重新賦值，div就再次繼承parent的新的寬度值。parent的寬度=div的寬度=div內部內容的寬度。
元素水平居中方式
1 對於行內元素來說，直接可以通過設定父元素的 text align center 1 正確 2 div style text align center 3 img 4div 56 錯誤 7 a href img a 2 塊級元素設定 margin 0 auto 必須設定塊級元素寬度才能實現元素居中...
Html 元素水平居中方案總結
先來看我乙個簡單xhtml html檔案 部分 我們的目的是讓 container水平居中。lorem ipsum dolor sit amet,consectetuer adipiscing elit.phasellus varius eleifend.使用自適應邊界 auto margin 水平...
HTML水平居中方法
一 對於行內元素採用text align center 的方式 二 採用margin 0 auto 來實現水平居中顯示 三 用table實現 四 塊級的元素但是通過轉換成行內元素來實現塊級元素的水平居中顯示 五 父子元素都採用相對定位，父元素left 50 子元素left 50 相對自己的長度減回5...