對於css頁面布局來說，居中對齊很常用，在這裡我們歸納總結一下各種居中對齊的方法。
1.頁面居中對齊
居中對齊乙個元素（如）可以使用margin：auto，必須要設定元素的寬度，通過指定寬度，將兩邊的空外邊距平均分配，達到頁面元素居中對齊的目的。注意：如果不設定width屬性（或設定為100%），居中對齊將不起作用。
>
>
charset
="utf-8"
>
>
css元素居中title
>
>
.center
style
>
head
>
>
>
元素居中對齊h2
>
>
水平居中塊級元素 (如 div), 可以使用 margin: auto;p
>
class
="center"
>
>
元素居中對齊p
>
div>
body
>
html
>
css中有很多方式可以實現垂直居中對齊，乙個簡單的方式就是頭部頂部使用padding。
>
>
charset
="utf-8"
>
>
垂直居中title
>
>
.center
style
>
head
>
>
class
="center"
>
>
我是垂直居中的。p
>
div>
body
>
html
>
通過執行結果我們可以看到，內容確實是垂直居中的，距離上下邊框分別為45px。如果要水平方向也居中，只需要再新增text-align: center即可。
3.垂直居中—使用line-height
使用line-height來設定元素垂直居中，只需要設定line-height的值與height的屬性值相等即可，所以前提條件是height的屬性值必須給出。
>
>
charset
="utf-8"
>
>
水平垂直居中title
>
>
.center
style
>
head
>
>
class
="center"
>
我是垂直居中的。div
>
body
>
html
>
css 高階 對齊 居中
除非已經宣告了 doctype，否則使用 margin auto 在 ie8 以及更早的版本中是無效的。margin 水平對齊 如果寬度為100 對齊無效 水平居中 right float 左右對齊 右對齊 right position 定位對齊 右對齊 right 垂直居中 垂直 水平居中 cen...
css 之水平居中對齊
初學css,對各種居中很是頭疼,這裡特地整理一下.1.設定 text align 屬性 例如 測試標題1具體解釋 css屬性定義行內內容 例如文字 如何相對它的塊父元素對齊。text align並不控制塊元素自己的對齊，只控制它的行內內容的對齊 總結 1.只能用於塊級元素內容 block conta...
css水平垂直居中對齊方式
css屬性 水平居中 text aligin center 垂直居中 line height height 例子 html div class mb10 line align 我是垂直水平居中對齊的文字哦！div div class mb10 line align span 我是垂直水平居中對齊的內...