首先，我們來了解水平居中,它有很多種方法，我們暫時先來了解其中的幾種：
1. 在實現方案中，我們最熟悉的莫過於給元素定義乙個寬度，然後使用margin：?
1
2
3
4
body
這個是當我們的定義元素的寬度時顯現的，
如果我們不能定義寬度時，該怎麼辦呢？
2. 我們對於定位也是常用的，在這裡當然也可以採用定位的方法來實現：?
1
2
3
4
body
3. 既然定位可以，那浮動也是可以的：?
1
2
3
4
body
4. 對於幾個元素同時居中在一條線上：?
1
2
3
body
5. 利用table:?
1
2
3
4
5
6
ul
ul li
6. 還可以使用inline-block來實現，但要使用這個就得在其父元素上設定text-align.如下：?
1
2
3
4
5
6
body
.content
實現垂直居中的四種方法：
1. 只能是單行文字居中（可適用於所有瀏覽器）：?
1
2
3
4
.content
2. 跟水平居中一樣，垂直也可以用定位的方法：?
1
2
3
4
5
6
7
8
9
10
11
12
13
.content
或者
.content
定位的方法，它的缺點是當沒有足夠的空間時，元素會消失。
3. 對此，浮動也是可以的：?
1
2
3
4
5
6
7
8
9
10
.content
.footer
對於浮動，我們需要在之後清除，並顯示在中間。
4. 也可以使用vertical-align屬性：?
1
2
3
4
.content
這種方法可以隨意改變元素高度，但在ie8中無效。
現在來看個div模組在螢幕中居中的例子：?
1
2
3
4
5
position:absolute;top:50%;left:50%; //上下移動螢幕的50%
margin:auto;
-webkit-transform: translate(-50%,-50%); //減去自身的50%（多移動的）
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
這個基本可以不確定寬高的模組居中，但是在低版本的瀏覽器中可能出現問題，現在還沒測試過，但是主流的都是可以的！
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...
居中 水平 垂直 水平垂直
將子元素的display設定為inline block，使子元素變成行內元素 這種方法的不足之處在於，子元素的text align繼承了父元素的center，文字也居中顯示，所以需要在子元素中設定text align left 思路二 在本身元素設定margin 0 auto實現塊級元素水平居中 若...