為方便演示，預設寬高各為100px的div
以下方式全部是水平及垂直居中
方法一：padding填充
.content缺點：如果父級的高度受到兄弟節點的影響，這樣自己就不居中了
方法二：絕對定位
position: relative;
}.content
優點：相容性非常好
缺點：需要提前知道div的寬高，實用性偏弱
方法三：計算屬性（calc）
margin: calc((100% - 100px) / 2);
width: 100px;
height: 100px;
background-color: red;
方法四：absolute + margin: auto;
position: relative;
}.content
優點：不需要提前知道尺寸，相容性好
缺點：暫時沒有什麼要說的，可能理解起來比較麻煩吧
解析：1、我們先讓content脫離文件流，然後設定上右下左四個位置均為0
2、給它固定寬高，限制大小
3、利用margin屬性，均分外邊距
方法四：absolute + transform
.content缺點：相容性偏弱
方法五：父級flex布局
display: flex;
justify-content: center;
align-items: center;}
優點：寫法極度簡單明瞭
缺點：就是相容性偏差，未來它可能是解決居中的王道（個人觀點）
方法六：父級table布局
display: table-cell;
vertical-align: middle;
}.content
優點：寫法極度簡單明瞭,相容性極好
缺點：就是有點老了
還有乙個更古老（有毒）的想法：
說實話，都2023年，誰要是在我的專案裡這麼幹
方法七：偽元素
width: 400px;
height: 400px;
text-align: center;
border: 2px solid blue;
} content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}.content
方法八：偽元素的另外一種實現方式（兄弟節點）
html:
style:
width: 400px;
height: 400px;
text-align: center;
border: 2px solid blue;
}.content, .brother
.content
.brother
方法九： line-heght（僅限單行文字垂直居中)
height: 400px;
line-height: 400px;
border: 1px solid red;}
img居中
如同這樣的效果：
其實上面的方法一道八變通一下，都可以實現的居中，這裡再分享乙個奇技淫巧！
就是background-position：center
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...