10種CSS水平垂直居中方法

編寫該博文僅僅作為梳理，鞏固學習，加強記憶。

場景一：居中元素寬高已知

absolute + 負 margin

absolute + margin auto

absolute + calc

absolute + transform

line-height

writing-mode

table

css-table

flex

grid

class

=>
class
='box'
>
love 我 lovediv
>
div>
場景一：居中元素寬高已知
大小&顏色
width: 400px;
height: 400px;
background: #abcdef;
}div.box 效果
1. absolute + 負margin
.box
2. absolute + margin auto
.box
3. absolute + calc
.box
場景二：居中元素寬高未知
大小&顏色
width: 400px;
height: 400px;
background: #abcdef;
}div.box 效果
稍有些複雜，可以參看參考**中的demo：
4. table標籤
>
>
>
class
=>
class
="box"
>
love 我 lovediv
>
td>
tr>
tbody
>
table
>
.box
5. css-table
class
=>
class
='box'
>
love 我 lovediv
>
div>
.box
6. flex
相容性說明：移動端均基本都可以使用flex；pc端需考慮相容性flex 相容性寫法：

display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
7. grid

.box
總結
flex 相容性方案：

（感謝原作者分享）

水平且垂直居中方法（10種）

水平且垂直居中方法有哪些？這在實際工作中經常用到，小記一下。i 一般的，水平居中相對垂直居中簡單很多，對於內聯元素 inline inline block inline table和inline flex 父級元素設定text align center 對於塊級元素，子級元素設定margin 0 a...

CSS垂直居中水平居中方法

center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...

css垂直水平居中方法

1.塊級元素中的行內元素水平居中 給塊級元素設定 text align center 2.塊級元素1中的塊級元素2水平居中 1 給塊級元素2設定 margin 0 auto 2 給塊級元素2設定 display inline block 給塊級元素1中設定 text align center 1.塊...