css居中方案彙總

2021-08-19 21:45:56 字數 2231 閱讀 1150

使其父元素為塊級元素的行內元素水平居中。

/* css */


.center-children
設定塊級元素的 margin-left 和 margin-right 為 auto ，來使其水平居中。

注意：這個塊級元素要有 width 屬性，否則會佔滿寬度，這時候已經不需要居中了。

/* css */


.center-me
方案一：利用display:inline-block; 塊級元素inline-block,父元素text-align:center。

/* css */


.inline-block-center


.inline-block-center


div
方案二：flex布局

/* css */


.flex-center
利用 margin: ***px auto;

/* css */


main


div
方案一：padding-top === padding-bottom

/* css */


.link
方案二：line-height === height

若 padding 無效，要使不換行的文字居中有乙個技巧，設定文字的 line-height 和 height 的值相等。

/* css */


.center-text-trick
方案一：padding-top === padding-bottom

方案二：table化 結合 verticl-align

如果這種方法不奏效的話，可以設定文字所在的元素為乙個 table cell（無論它直接是 table 還是用css使這個元素表現的像乙個 table cell），結合 vertical-align 屬性處理這種情況，它與我們通常所做的在行上處理元素對齊的方式不同：

/* css */


/* table 的情況 */


table


table


td/* display:table 的情況 */


.center-table


.center-table


p
方案三：flex布局

注意：父元素height值(px %)固定

/* css */


.flex-center-vertically
方案四：偽元素

原理：讓乙個完整高度的偽元素放置在容器內，並與文字垂直對齊。

/* css */


.ghost-center


.ghost-center


::before


.ghost-center


p
絕頂定位+百分比+負margin

/* css */


.parent


.child
不知道元素的高度是比較常見的，有很多原因：如果寬度改變，文字回流會改變高度；文字樣式改變會改變高度；文字數量改變會改變高度；乙個固定比例的元素，比如，當重置尺寸的時候也會改變高度，等等。

方案一：絕對定位+百分比+transform

/* css */


.parent


.child


/* css */


.parent
絕對定位+百分比+負margin組合

/* css */


.parent


.child
方案一：絕對定位+百分比+transform組合

/* css */


.parent


.child


/* css */


.parent


/* css */


body, html


span

CSS 居中方法彙總

css居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把css居中的方案彙編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。如有漏掉的，還會陸續的補充進來。水平居中 1.1內聯元素水平居中 利用 text align center 可以實現在塊級元素內部的內聯元素水平...

css水平垂直居中方案

行內元素的水平居中 要實現行內元素 等 的水平居中，只需把行內元素包裹在塊級父層元素 text align center 並且適用於文字，鏈結，及其inline或者inline block inline table和inline flex。demo 塊狀元素的水平居中 要實現塊狀元素 display...

各種居中方案

元素居中是常見的場景，此頁為總結各種實現方式 內聯元素 inline,inline block等 將父元素的text align屬性設為center。text align css屬性定義行內內容 例如文字 如何相對它的塊父元素對齊。塊級元素 block等 設定margin left,margin r...