text-align
在父元素中設定text-align:center
實現行內元素
水平居中
，若子元素為塊級元素，
將子元素設定為
display：
inline-block
，使子元素變成行內元素。
若要相容ie7-瀏覽器，
可使用display:inline;zoom:1;來達到inline-block的效果
[注意] 子元素的text-align繼承了父元素的center，文字也居中顯示，所以需要在子元素中設定text-align:left。
margin
在本身元素設定margin: 0 auto實現
塊級元素
水平居中。但是塊級元素預設是佔滿一行的。
1）若未設定寬度，將(div)元素設定為display：table，使元素成為塊級元素，同時table還具有包裹性，寬度由內容撐開
若要相容ie7-瀏覽器，可把child的結構換成demo
2）若設定寬度，直接使用即可。
absolute
1）配合relative
relative數值型的偏移屬性是相對於自身的，但百分比卻是相對於包含塊的。需要在子元素外面和父元素之間在增加一層結構，使其寬度與子元素寬度相同，用來當做包含塊。
.parent
.childwrap
.child
demo
[注意]該方法全相容，但是增加了html結構
flex
使用彈性盒模型flex實現水平居中
[注意]ie9-瀏覽器不支援
1)在伸縮容器
上設定主軸對齊方式justify-content:center2)在
伸縮專案
上設定margin: 0 auto
CSS之水平垂直居中
html div css box要點 已知元素高和寬，將其絕對定位時，top，left定位50 最後將margin top 和 margin left 設為高和寬的一半的負值。box 要點 可以不知道元素高和寬，將其絕對定位時，top，left定位50 最後translate 50 50 即移動相對...
css 之水平居中對齊
初學css,對各種居中很是頭疼,這裡特地整理一下.1.設定 text align 屬性 例如 測試標題1具體解釋 css屬性定義行內內容 例如文字 如何相對它的塊父元素對齊。text align並不控制塊元素自己的對齊，只控制它的行內內容的對齊 總結 1.只能用於塊級元素內容 block conta...
居中之美之水平居中系列
1 這種方法主要使用margin auto配合元素的width來實現水平居中的效果 content horizontal 備註 因為不設定寬度的話，塊級元素預設的寬度為父元素的寬度，子元素和父元素一樣寬，那就沒有水平居中而言啦 使用上面方法實現元素水平居中一定要讓元素滿足兩個條件 其一，元素需要有乙...