1
2
3
4
5
|
.Absolute-Center {
margin
:
auto
;
position
:
absolute
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
}
|
-
跨浏览器,兼容性好(无需hack,可兼顾IE8~IE10)
-
无特殊标记,样式更精简
-
自适应布局,可以使用百分比和最大最小高宽等样式
-
居中时不考虑元素的padding值(也不需要使用box-sizing样式)
-
布局块可以自由调节大小
-
img的图像也可以使用
-
必须声明元素高度
-
推荐设置overflow:auto;样式避免元素溢出,显示不正常的问题
-
这种方法在Windows Phone上不起作用
对照表
‘可变高度’的特性不能跨浏览器 | ||||||
不具有响应式特性,margin值必须经过手工计算 | ||||||
妨碍渲染 | ||||||
会加上多余的标记 | ||||||
需要使用容器包裹和hack式的样式 | ||||||
需要使用容器包裹和厂商前缀(vendor prefix) |
说明
对齐
容器内对齐
1
2
3
4
5
6
7
8
9
10
11
12
|
.Center-Container {
position
:
relative
;
}
.Absolute-Center {
width
:
50%
;
height
:
50%
;
overflow
:
auto
;
margin
:
auto
;
position
:
absolute
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
}
|
在可视区域内居中
1
2
3
4
|
.Absolute-Center.is-Fixed {
position
:
fixed
;
z-index
:
999
;
}
|
偏移值
1
2
3
4
|
.Absolute-Center.is-Fixed {
position
:
fixed
;
z-index
:
999
;
}
|
带响应式
1
2
3
4
5
6
7
|
.Absolute-Center.is-Responsive {
width
:
60%
;
height
:
60%
;
min-width
:
200px
;
max-width
:
400px
;
padding
:
40px
;
}
|
带溢出内容
1
2
3
|
.Absolute-Center.is-Overflow {
overflow
:
auto
;
}
|
大小可调整
1
2
3
4
5
6
7
8
|
.Absolute-Center.is-Resizable {
min-width
:
20%
;
max-width
:
80%
;
min-height
:
20%
;
max-height
:
80%
;
resize:
both
;
overflow
:
auto
;
}
|
-
需要设置max-width/max-height给内容区域留足够的空间,不然就有可能使容器溢出。
-
resize属性不支持移动版浏览器和IE8-10,如果用户体验很重要的话,请确保用户可以有其他替代方法来改变大小。
-
同时使用resize样式和transition会使用户在开始改变大小时产生等于transition效果时间等长的延时。
图像
1
|
|
1
2
3
4
5
6
7
8
|
.Absolute-Center.is-Image {
height
:
auto
;
}
.Absolute-Center.is-Image img {
width
:
100%
;
height
:
auto
;
}
|
可变高度
-
与大小可调整技术是不兼容的
-
Firefox/IE8中使用display: table,内容区在垂直方向靠上,水平方向仍然居中。
-
IE9/10中使用display: table,内容区会跑到左上角。
-
移动版Safari中内容区是水平对齐的,但是如果使用了百分比的宽度,水平方向上会稍稍偏离中心。
1
2
3
4
|
/* Modernizr Test for Variable Height Content */
Modernizr.testStyles(
'#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }'
, function(elem, rule) {
Modernizr.addTest(
'absolutecentercontent'
, Math.round(window.innerHeight /
2
-
25
) === elem.offsetTop);
});
|
1
2
3
4
|
.absolutecentercontent .Absolute-Center.is-Variable {
display
: table;
height
:
auto
;
}
|
其他方法
负margin值
1
2
3
4
5
6
7
8
9
|
.is-Negative {
width
:
300px
;
height
:
200px
;
padding
:
20px
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
margin-left
:
-170px
;
/* (width + padding)/2 */
margin-top
:
-120px
;
/* (height + padding)/2 */
}
|
-
浏览器兼容性非常好,甚至支持IE6-7
-
需要的编码量很少
-
这是个非响应式的方法,不能使用百分比的大小,也不能设置min-/max-的最大值最小值。
-
内容可能会超出容器
-
需要为padding预留空间,或者需要使用box-sizing: border-box样式。
transform法
1
2
3
4
5
6
7
8
9
|
.is-Transformed {
width
:
50%
;
margin
:
auto
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
-webkit-transform: translate(
-50%
,
-50%
);
-ms-transform: translate(
-50%
,
-50%
);
transform: translate(
-50%
,
-50%
);
}
|
-
内容高度可变
-
代码量小
-
不支持IE8
-
需要写厂商前缀
-
会和其他transform样式有冲突
-
某些情况下的边缘和字体渲染会有问题
table-cell法
1
2
3
4
5
6
7
|
<div class=
"Center-Container is-Table"
>
<div class=
"Table-Cell"
>
<div class=
"Center-Block"
>
<!-- CONTENT -->
</div>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
|
.Center-Container.is-Table {
display
: table; }
.is-Table .Table-Cell {
display
:
table-cell
;
vertical-align
:
middle
;
}
.is-Table .Center-Block {
width
:
50%
;
margin
:
0
auto
;
}
|
-
内容高度可变
-
内容溢出则能自动撑开父元素高度
-
浏览器兼容性好
-
需要额外的HTML标签
inline-block法
1
2
3
4
5
|
<
div
class
=
"Center-Container is-Inline"
>
<
div
class
=
"Center-Block"
>
<!-- CONTENT -->
</
div
>
</
div
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.Center-Container.is-Inline {
text-align
:
center
;
overflow
:
auto
;
}
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display
: inline-
block
;
vertical-align
:
middle
;
}
.Center-Container.is-Inline:after {
content
:
''
;
height
:
100%
;
margin-left
:
-0.25em
;
/* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
max-width
:
99%
;
/* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}
|
-
内容高度可变
-
内容溢出则能自动撑开父元素高度
-
浏览器兼容性好,甚至可以调整支持IE7
-
需要额外容器
-
依赖于margin-left: -0.25em的样式,做到水平居中,需要为不同的字体大小作调整
-
内容区声明的宽度不能大于容器的100% 减去0.25em的宽度
Flexbox法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.Center-Container.is-Flexbox {
display
: -webkit-box;
display
: -moz-box;
display
: -ms-flexbox;
display
: -webkit-flex;
display
: flex;
-webkit-box-align:
center
;
-moz-box-align:
center
;
-ms-flex-align:
center
;
-webkit-align-items:
center
;
align-items:
center
;
-webkit-box-pack:
center
;
-moz-box-pack:
center
;
-ms-flex-pack:
center
;
-webkit-justify-
content
:
center
;
justify-
content
:
center
;
}
|
-
内容可以是任意高宽,溢出也能表现良好
-
可以用于各种高级布局技巧
-
需要在body上写样式,或者需要额外容器
-
需要各种厂商前缀兼容现代浏览器
-
可能有潜在的性能问题