CSS之元素居中

2021-08-28 11:02:22 字數 699 閱讀 5188

水平居中分為了行級元素、塊級元素(定寬塊級元素、不定寬塊級元素)。

行級元素居中只需在父元素中新增text-align:center屬性即可。

定寬塊級元素使用margin:0 auto;進行居中。

不定寬元素使用display:inline;text-align:center。

設定height與line-height高度一致。

1.已知子元素高度和父元素高度,直接使用margin-top屬性,其值為父元素高度的一半減去子元素高度的一半;或者使用position子元素對於父元素絕對定位,top:50%,margin-top減去自身高度一半。

2.子元素相對父元素絕對定位,設定top、right、bottom、left四個方向均為0,並使用margin:auto進行垂直水平居中。

3.父元素中使用display:table-cell,vertical-align:middle實現對子元素的垂直居中。

4.使用transform進行垂直居中(存在相容性問題):子元素對於父元素進行絕對定位,top、left設定為50%,使用transform:translate(-50%,-50%),使用這種方式無需知道子元素高度。

5.使用flex實現

css 元素居中

水平居中 1.行內標籤 和行內塊級標籤可以設定 text algin center 2.塊級標籤 margin 0 auto 對浮動元素或絕對定位元素無效 不識別auto。3.浮動的元素 定位加left 50 transform translate 50 0 垂直居中 1.行內標籤 和行內塊級標籤可...

css 元素居中

元素有寬高 未知寬高 水平居中 1.margin 2.text align 3.position absolute和0 4.position absolute和負margin 5.translatex 6.flex 7.table cell 1.translatex 2.flex 3.table c...

css元素居中

注意 這個方法對浮動元素或是絕對定位元素無效,這個元素要居中的前提條件是元素的寬度設定了,並且display屬性為block 塊 並且不能設定浮動,否則不起作用 只能對 按鈕 文字等行內元素進行水平居中 display inline或display inline block等 text align ...