元素居中方法

一、水平居中方式

行內元素：text-alien：center

塊元素：

-已知寬度：

1）margin：0 auto；

2）position+margin組合（left：50%;margin-left:-?px）

-未知寬度：

1）*display：inline/inline-block

*text-alien:center

2）position：relative；

left：50%； transform：translatex（-50%）

3)flex布局

display：flex；justify-content：center

二、垂直居中

已知高度：

對於單行文字 

1）inline-height：？px  (設定為和高度相等)

塊元素：

1）position+margin

未知高度：

行內塊元素

1）vertical-align:middle

塊元素：

1）給父元素display:table，子元素display：table-cell

2）flex布局

3）position+translate

元素居中方法

一 水平居中方式 行內元素 text alien center 塊元素 已知寬度 1 margin 0 auto 2 position margin組合 left 50 margin left px 未知寬度 1 display inline inline block text alien cent...

元素垂直居中方法

1 固定height的元素居中 1 使用絕對定位 相容所有瀏覽器，瀏覽器視窗縮小時，部分內容會消失 居中元素 content 2 在居中元素外插入乙個div 相容所有瀏覽器，瀏覽器視窗縮小時，內容不會消失 居中元素 main content 3 使用絕對定位，margin auto 相容所有瀏覽器，...

CSS元素居中方法總結

css實現元素居中。1 使用position absolute,設定left top margin left margin top的屬性 one 這種方法基本瀏覽器都能夠相容，不足之處就是需要固定寬高。2 使用position fixed,同樣設定left top margin left margi...