元素居中方法

2021-09-27 14:17:51 字數 638 閱讀 1300

一、水平居中方式

行內元素: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...