首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种:
1. 在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin:
1
2
3
4
|
body{
width
:
960px
;
margin
:
0
auto
;
}
|
这个是当我们的定义元素的宽度时显现的,如果我们不能定义宽度时,该怎么办呢?
2. 我们对于定位也是常用的,在这里当然也可以采用定位的方法来实现:
1
2
3
4
|
body{
position
:
absolute
;
left
:
50%
;
}
|
3. 既然定位可以,那浮动也是可以的:
1
2
3
4
|
body{
float
:
left
;
right
:
50%
;
}
|
4. 对于几个元素同时居中在一条线上:
1
2
3
|
body{
vertical-align
:
middle
;
}
|
5. 利用table:
1
2
3
4
5
6
|
ul{
display
:table;
}
ul li{
display
:
table-cell
;
}
|
6. 还可以使用inline-block来实现,但要使用这个就得在其父元素上设置text-align.如下:
1
2
3
4
5
6
|
body{
text-align
:
center
;
}
.content{
display
:inline-
block
;
}
|
实现垂直居中的四种方法:
1. 只能是单行文本居中(可适用于所有浏览器):
1
2
3
4
|
.content{
height
:
100px
;
line-height
:
100px
;
}
|
2. 跟水平居中一样,垂直也可以用定位的方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.content{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
margin
:
auto
;
}
或者
.content{
position
:
absolute
;
top
:
50%
;
}
|
定位的方法,它的缺点是当没有足够的空间时,元素会消失。
3. 对此,浮动也是可以的:
1
2
3
4
5
6
7
8
9
10
|
.content{
float
:
left
;
top
:
50%
;
margin-bottom
:
-120px
;
}
.footer{
clear
:
both
;
height
:
240px
;
position
:
relative
;
}
|
对于浮动,我们需要在之后清除,并显示在中间。
4. 也可以使用vertical-align属性:
1
2
3
4
|
.content{
display
:
table-cell
;
vertical-align
:
middle
;
}
|
这种方法可以随意改变元素高度,但在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%
);
|
这个基本可以不确定宽高的模块居中,但是在低版本的浏览器中可能出现问题,现在还没测试过,但是主流的都是可以的!