水平居中
行內元素
定寬塊級元素
不定寬塊級元素
垂直居中
隱性改變display型別
實際開發過程中我們會遇到很多需要元素水平居中的情況，例如文章標題等。這裡常見的水平居中情況有行內元素和塊級元素兩種，塊級元素又分為定寬塊級元素和不定寬塊級元素兩種情況。定寬塊級元素顧名思義就是塊級元素的width是個固定的值；那麼不定寬塊級元素我們就知道是塊級元素的width不是個定值的情況。
當被設定的元素是文字、等行內元素的時候，我們是通過給父元素設定text-align:center來實現的。
這是乙個在父元素中居中元素
滿足定寬塊級元素"定寬"和"塊級元素"兩個條件是可以通過設定左右margin的值為auto來實現居中。
水平居中的定寬塊級元素
/*或者也可以寫成 margin-left:auto;
margin-right:auto;*/
/* 元素的上下margin屬性可以照常設定，不受影響 */
不定寬塊級元素的居中方法有三種：第一種是加入table標籤；第二種是設定display:inline方法，與第一種類似，顯示型別設為行內元素，進行不定寬元素的屬性設定；第三種方法是設定position:relative和left:50%，利用相對定位的方式，將元素向左偏移50%用以實現居中的目的。
加入table標籤
加入table標籤是利用table標籤的長度自適應性（不定義其長度也不預設父元素body的長度，table長度是根據內文字長度決定的），因此可以看作乙個定寬塊級元素，然後再利用定寬塊級元素居中的margin方式使其水平居中。
使用的方式第一步為需要設定居中的元素外面加乙個table標籤，然後為這個table設定"左右margin居中"
改變塊級元素的display為inline型別，設定為行內元素顯示，然後使用text-align:center來實現居中顯示。這種方法相較於設定table方式的優勢是不用增加無語義標籤，但是這種方式也存在一定的問題，就是它將塊狀元素的display改為inline，元素變為行內元素後會少了一些功能使用。
通過給父元素設定float，然後設定position:relative和left:50%，子元素設定position:relative和left:50%來實現水平居中。
父元素高度確定的單行文字
父元素高度確定的單行文字豎直居中的方法是通過設定父元素的height和line-height高度一致來實現的。height是該元素的高度，line-height是行高，也就是行間距，是行與行之間的基線間的距離。line-height與font-size的計算值之差分為兩半(在css中稱為"行間距")，分別加到乙個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。這種文字行高與塊高一致帶來了乙個弊端，就是當文字內容的長度大於塊的寬度的時候，就會有內容脫離了塊。
hello,world!
父元素高度確定的多行文字、等豎直居中有兩種方式，第一種是插入table標籤，然後設定vertical-align:middle。css中有乙個用於豎直居中的屬性vertical-align，在父元素設定此樣式時，會對inline-block型別的子元素都有用。
/* 方式一 */
居中一下
/* 方式二 */
居中一下下
居中一下下
居中一下下
居中一下下
居中一下下
在我們開發過程中當為元素設定position:absolute或者float:left屬性的時候，元素的顯示型別就會自動變為以display:inline_block(塊級元素)的方式顯示，可以設定元素的width和height。
點這裡看看
HTML之垂直居中問題
今天遇到乙個垂直居中的問題，除錯了乙個多小時，終於找到乙個解決辦法，雖然不夠完美，但是能解決當前問題，現來總結一下居中的一些常見問題 居中 這個最好解決，直接呼叫現成的css style vertical align middle div居中 這個就挺麻煩，因為現成的css style對div無效，...
HTML幾種設定水平居中和垂直居中的方式
水平居中 1.平居中設定 定寬塊狀元素 當被設定元素為 塊狀元素 時用 text align center 就不起作用了，這時也分兩種情況 定寬塊狀元素和不定寬塊狀元素。這一小節我們先來講一講定寬塊狀元素。定寬塊狀元素 塊狀元素的寬度width為固定值。滿足定寬和塊狀兩個條件的元素是可以通過設定 左...
html 居中布局
需求，有三個內容需要居中顯示 內容居中，我們太熟悉了 content1,content2,content3 這樣，三個內容都居中了。然後，當content1 內容裡面的h1,距離頂部有50個畫素的時候，怎麼寫？第一反應，用margin title但是，緊鄰的塊級元素會發生margin collaps...