純CSS3實現垂直居中的九種方法

瀏覽時看到的資料，每個都做了測試，很好，就先收了~

測試的是谷歌瀏覽器，沒有任何問題，用360，ie11,火狐，搜狗瀏覽器做測試時，第五個方法在360，搜狗，和ie11有點問題，第七個在ie11有問題，第8個在ie11，火狐有問題。保險起見，使用前四個好，出現的問題需要再解決。

1

doctype html
>
2<
html
>
3<
head 
lang
="en"
>
4<
meta 
charset
="utf-8"
>
5<
title
>css3實現垂直居中的方法
title
>
6<
style
>
7.box
13.box1
19span
24.box2
31.box3
34.box3 span
46.box4
49.box4 span
62.box5
65.box5 span
75.box6
79.box6 span
85.box6:after
92.box7
96.box7 span
100.box8
108109
.floater 
115.content 
122style
>
123head
>
124<
body
>
125<
div 
class
="box box1"
><
span
>方法一：方法1：table-cell.純css3實現垂直居中，哈哈哈，我居中了
span
>
div>
126<
div 
class
="box box2"
><
span
>方法二：方法2：display:flex.純css3實現垂直居中，哈哈哈，我居中了
span
>
div>
127<
div 
class
="box box3"
><
span
>方法三：方法3：絕對定位和負邊距.純css3實現垂直居中，哈哈哈，我居中了
span
>
div>
128<
div 
class
="box box4"
><
span
>方法四：方法4：絕對定位和0 .純css3實現垂直居中，哈哈哈，我居中了
span
>
div>
129<
div 
class
="box box5"
><
span
>方法五：方法5：translate .純css3實現垂直居中，哈哈哈，我居中了
span
>
div>
130<
div 
class
="box box6"
><
span
>方法六：方法6：display:inline-block .純css3實現垂直居中，哈哈哈，我居中了
span
>
div>
131<
div 
class
="box box7"
><
span
>方法七：方法7：display:flex和margin:auto .純css3實現垂直居中，哈哈哈，我居中了
span
>
div>
132<
div 
class
="box box8"
><
span
>方法八：方法8：display:-webkit-box .純css3實現垂直居中，哈哈哈，我居中了
span
>
div>
133<
div 
class
="box"
>
134<
div 
class
="floater"
>
div>
135<
div 
class
="content"
>方法九：display:-webkit-box .純css3實現垂直居中，哈哈哈，我居中了 
div>
136div
>
137body
>
138html
>

下面的時測試結果圖

純CSS實現垂直居中

垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。html結構 垂直居中 方法1 table cell box1方法2 display flex box1方法3 絕對...

CSS 3 實現水平垂直居中效果

在css中實現水平居中，會比較簡單。常見的，如果想實現inline元素或者inline block元素水平居中，可以在其父級塊級元素上設定 text align center實現 如果想實現塊級元素的水平居中對齊，可以設定magin auto。而如果想實現垂直居中對齊，或許就不太容易。以下，我總結了...

CSS 3 實現水平垂直居中效果

在css中實現水平居中，會比較簡單。常見的，如果想實現inline元素或者inline block元素水平居中，可以在其父級塊級元素上設定text align center實現 如果想實現塊級元素的水平居中對齊，可以設定magin auto。而如果想實現垂直居中對齊，或許就不太容易。以下，我總結了一...