一、水平居中（text-align：center）（可繼承）
1、行內元素
text-align：取值包括4個：left | right | center | justify
這裡的align指的是每行的文字都向乙個方向靠。
ps：text-align存在相容性問題
css2.1標準下，center可以居中所有行內元素
css1（ie6，7，8）標準下，只有塊狀元素具有該屬性，並且所有元素都會被居中
ps：文字排列方式用writing-mode來控制，有兩個值：lr-tb和tb-rl ;
2、塊狀元素
margin:0 auto;
3、浮動居中
首先要讓父元素具有一定寬度，可以在浮動元素外面巢狀一層div，讓外層div居中。
二、垂直對齊：
vertical-align: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
常用的：vertical-align：middle 和 vertical-align：length（可以控制相對於自身內容高度垂直方向上的偏移量）
1、基線的概念（基準線）
英文的基線就是四線格的倒數第二根
以下藍色線是中文字型的基線
基線是根據行高line-height決定的
2、line-height (行高)
1）行內框的概念
行內框是行內元素裡的每個元素（行內元素或者文字）所在框
2）行框的概念
重點，行內框裡的所有行內元素和文字必須相對於行內框基線對齊，並且當行內元素巢狀時（即行內框巢狀時），從最內層開始一步一步決定包含它的框的行高以及基線
行框的基線位置是在滿足所有內部行內元素對齊的情況下，令此基線最低的位置
3、基線的預設對齊方式
1）文字的 baseline 就不說了。
2）對於 img 和 inline-block 其 baseline 低邊框(margin下邊緣)。
3）對於input (text)其baseline 根據裡面的行內框決定的
對於img等元素，我們可以設定vertical-align:middle調整基線
三、塊狀元素垂直居中
HTML之垂直居中問題
今天遇到乙個垂直居中的問題，除錯了乙個多小時，終於找到乙個解決辦法，雖然不夠完美，但是能解決當前問題，現來總結一下居中的一些常見問題 居中 這個最好解決，直接呼叫現成的css style vertical align middle div居中 這個就挺麻煩，因為現成的css style對div無效，...
關於html中 居中 問題小結
乙個div在body內居中 適用於登入介面登入小視窗 方法一 給div如下屬性 width 500px height 300px background ccc position absolute left 50 top 50 margin left 250px margin top 150px 乙個...
html 居中布局
需求，有三個內容需要居中顯示 內容居中，我們太熟悉了 content1,content2,content3 這樣，三個內容都居中了。然後，當content1 內容裡面的h1,距離頂部有50個畫素的時候，怎麼寫？第一反應，用margin title但是，緊鄰的塊級元素會發生margin collaps...