1.行內文字居中，未設定高度，定位，浮動的情況下失效
text-align：center，水平居中
line-height: 行高，垂直居中
2.**內元素的居中
text-align：center，水平居中
vertical-align：middle，垂直居中
3.元素水平居中，父元素和居中元素設定寬
使用外邊距：margin：0 auto；
使用定位：position：absolute；（父元素也要定位）
left：50%；
margin-left：-width/2 或者 transform：translatex（-50%）；
使用外邊距2：margin-left: 50%；
transform：translatex（-50%）；
4.元素垂直居中，父元素和居中元素設定高
使用定位：position：absolute；
top：50%；
margin-top：-height/2 或者 transform：translatey（-50%）；
使用外邊距：margin-top：50%；
transform：translatey（-50%）；
5.元素水平垂直居中
使用外邊距：margin-top：50%；
margin-left：50%；
transform：translate（-50%，-50%）；
適用於未知寬高的元素
使用定位1：position：absolute；
left：50%；
top：50%；
margin-left：-width/2；
margin-top：-height/2；
適用於已知寬高的元素
使用定位2：position：absolute；
left：50%；
top：50%；
transform：translate（-50%，-50%）；
適用於未知寬高的元素
使用定位加外邊距：position：absolute；
top：0；
bottom：0；
left：0；
right：0；
margin：auto；
適用於已知寬高的元素
使用彈性盒模型：display：flex；
justify-content：center；
align-items：center；
適用於未知寬高的元素，相容性好
使用**屬性：父元素：display：table-cell；
vertical-align：middle；
子元素：text-align：center；
適用於未知寬高情況下，但是float，position時會失效
使用內聯塊+偽元素生成的content：父元素：text-align：center；
父元素:before ：content："."；
display：inline-block；
vertical-align：middle；
子元素：display：inline-block；
vertical-align：middle；
適用於未知寬高的元素，相容性好，可自適應，但是水平居中要考慮換行符的問題
元素水平居中方式
1 對於行內元素來說，直接可以通過設定父元素的 text align center 1 正確 2 div style text align center 3 img 4div 56 錯誤 7 a href img a 2 塊級元素設定 margin 0 auto 必須設定塊級元素寬度才能實現元素居中...
常見的幾種居中方式
text align center line height 容器高度 父元素text align center line height 160px font size 0 子元素 vertical align middle 與父元素對齊 vertical align回顧middle是對齊父元素的 m...
常見居中方式 （水平居中 垂直居中）
1.水平居中 1 子元素 margin 0 auto 2 使用絕對定位 父元素 position relative 子元素 position absolute left 50 transform translatex 50 3 父元素 text align center 子元素 display in...