第一种方法：用margin+绝对定位的方式
兼容性：IE6，IE7下完全失效
HTML代码：
|
1
2
3
|
<
div
id
=
"container"
>
<
div
class
=
"center"
></
div
>
</
div
>
|
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
#container{
/*基本样式*/
width
:
500px
;
height
:
500px
;
background
:
#fee
;
/*定位方式*/
position
:
relative
;
}
.
center
{
/*基本样式*/
width
:
200px
;
height
:
200px
;
background
:
#aa0
;
/*水平居中*/
margin
:
auto
;
/*垂直居中*/
position
:
absolute
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
}
|
效果：
第二种方法：用inline-block和table-cell
兼容性：IE6，IE7下垂直居中失效
CSS代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#container{
/*基本样式*/
width
:
500px
;
height
:
500px
;
background
:
#fee
;
/*display*/
display
:
table-cell
;
text-align
:
center
;
vertical-align
:
middle
;
}
.
center
{
/*基本样式*/
width
:
200px
;
height
:
200px
;
background
:
#aa0
;
/*display：通过转为行内块配合父级元素使用text-align实现水平居中*/
display
:inline-
block
;
}
|
第三种方法：用纯position
兼容性：所有浏览器都支持，包括老IE。缺陷：必须明确宽高的固定值
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#container{
/*基本样式*/
width
:
500px
;
height
:
500px
;
background
:
#fee
;
/*定位方式*/
position
:
relative
;
}
.
center
{
/*基本样式*/
width
:
200px
;
height
:
200px
;
background
:
#aa0
;
/*定位方式*/
position
:
absolute
;
top
:
150px
;
/*（父元素的宽高-子元素的宽高）/2*/
left
:
150px
;
}
|
第四种方法：用position和transform
兼容性：一看到CSS3属性就知道了IE8及以下浏览器都不支持，个人认为这种方法有些鸡肋
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
#container{
/*基本样式*/
width
:
500px
;
height
:
500px
;
background
:
#fee
;
/*定位方式*/
position
:
relative
;
}
.
center
{
/*基本样式*/
width
:
200px
;
height
:
200px
;
background
:
#aa0
;
/*定位方式*/
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform:translate(
-50%
,
-50%
);
-webkit-transform:translate(
-50%
,
-50%
);
}
|
第五种方法：用display:flex和margin
兼容性：IE9及以下版本垂直居中都失效，由于代码简单，推荐移动端使用
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#container{
/*基本样式*/
width
:
500px
;
height
:
500px
;
background
:
#fee
;
/*display*/
display
:flex;
}
.
center
{
/*基本样式*/
width
:
200px
;
height
:
200px
;
background
:
#aa0
;
/*居中*/
margin
:
auto
;
}
|
第六种方法：用display:flex;和align-items:center;和justify-content:center;
兼容性：IE9及以下版本水平垂直居中完全失效，推荐移动端使用
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#container{
/*基本样式*/
width
:
500px
;
height
:
500px
;
background
:
#fee
;
/*display*/
display
:flex;
align-items:
center
;
justify-
content
:
center
;
}
.
center
{
/*基本样式*/
width
:
200px
;
height
:
200px
;
background
:
#aa0
;
}
|
可下载掘金App，搜索更多更全的方法
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1854929
