一、水平居中的四種方法（父容器和子容器寬度均不固定）
1、inline-block + text-align
子容器：
父容器：
缺點：不相容ie6、7，子容器內部的內容也會居中
相容辦法：子容器：//模擬inline-block
2、table + margin
子容器：//display:table使子容器寬度隨著內容走
優點：只用處理子容器
缺點：不相容ie6、7
相容辦法：將html結構改成
3、absolute + transform
父容器：
子容器：//子容器往左移動了自己寬度的50%
優點：子容器不影響其他子元素
缺點：transform是css3的樣式，不相容ie6、7、8，可能需要給不同瀏覽器加不同的私有字首
4、flex + justify-content
(1) 父元素：
優點：不需要設定子元素
(2) 父元素： 子元素：
缺點：只有高版本瀏覽器才相容flex和align-items
二、垂直居中的三種方法（父容器和子容器寬度均不固定）
1、table-cell + vertical-align
父容器：
優點：只用處理父容器
缺點：不相容ie6、7
相容辦法：將html結構改成
2、absolute + transform
父容器：
子容器：
優點：子容器不影響其他子元素
缺點：transform是css3的樣式，不相容ie6、7、8，可能需要給不同瀏覽器加不同的私有字首
3、flex + align-items
父容器：//當時flex時父容器預設的align-items是stretch
缺點：只有高版本瀏覽器才相容flex和align-items
二、水平和垂直都居中的三種方法（父容器和子容器寬度均不固定）
1、inline-block + text-align + table-cell + vertical-align
子容器：
父容器：
2、absolute + transform
父容器：
子容器：
3、flex + justify-content + align-items
父容器：
CSS 垂直居中和水平居中
position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...
CSS垂直居中和水平居中
總括 css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。人生用物，各有天限 夏澇太多，必有秋旱。水平居中設定 行內元素 設定 text align center ...
CSS 水平居中和垂直居中
1 水平居中 行內元素 text align center 2 水平居中 定寬塊狀元素 margin auto，滿足定寬和塊狀兩個條件的元素是可以通過設定 左右margin 值為 auto 來實現居中的。3 水平居中 不定寬塊狀元素 不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 1 ...