css實現居中是面試中經常考的一道題目
元素固定寬高
元素不固定寬高
absolute+負margin
>
.fa.box
style
>
class
="fa"
>
class
="box"
>
div>
div>
通過設定各個方向的距離都是0，此時再講margin設為auto，就可以在各個方向上居中了
>
.fa.box
style
>
class
="fa"
>
class
="box"
>
div>
div>
calc() 函式用於動態計算長度值。
>
.fa.box
style
>
class
="fa"
>
class
="box"
>
div>
div>
這種方法可以不需要知道元素的寬高
>
.fa.box
style
>
class
="fa"
>
class
="box"
>
div>
div>
把元素變成行內塊元素
>
.fa.box
style
>
class
="fa"
>
class
="box"
>
div>
div>
table裡面的內容天然垂直居中
>
.fa.box
style
>
>
>
>
class
="fa"
>
class
="box"
>
123div
>
td>
tr>
tbody
>
table
>
三行**就可以解決
>
.fa.box
style
>
class
="fa"
>
class
="box"
>
div>
div>
網格布局 相容性不太好
>
.fa.box
style
>
class
="fa"
>
class
="box"
>
div>
div>
有相容性要求 寬高固定推薦使用 absolute+負margin
無相容性要求 推薦使用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 ...