这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大堆。
但是方法虽多,却有很多适用的限制,并没有一种可以随意通用的。
所以想来自己做一下总结,方便查找交流。
效果图都为这个:
方法一:position加margin
/**html**/
<div class="wrap"> <div class="center"></div> </div> /**css**/ .wrap { width: 200px; height: 200px; background: yellow; position: relative; } .wrap .center { width: 100px; height: 100px; background: green; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
适用场景:内外层宽高都已知的情况下,主流浏览器均可使用此方法,但是IE6不支持
方法二: diaplay:table-cell
<div class="wrap"> <div class="center"></div> </div> /*css*/ .wrap{ width: 200px; height: 200px; background: yellow; display: table-cell; vertical-align: middle; text-align: center; } .center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: green; }
适用场景:由于display:table-cell的原因,IE6\7不兼容
方法三:position加 transform
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!-- html -->
<div
class
=
"wrap"
>
<div
class
=
"center"
></div>
</div>
/* css */
.wrap {
position: relative;
background: yellow;
width: 200px;
height: 200px;}
.center {
position: absolute;
background: green;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width: 100px;
height: 100px;
}
|
适用场景:transform是css3的新属性,如果是做移动端页面,可以放心使用。用这个方法相当于放弃了IE9以下的适配
方法四:flex;align-items: center;justify-content: center
<div class="wrap"> <div class="center"></div> </div> /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: -webkit-flex;-webkit-align-items: center;-webkit-justify-content: center;
}.center { background: green; width: 100px; height: 100px;}
适用场景:flexbox只有主流浏览器支持比较好,但是要记得在前面加-webkit-、-o-、-ms-之类的匹配。移动端首选。
方法五:display:flex;margin:auto
<div class="wrap"> <div class="center"></div> </div> /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; } .center { background: green; width: 100px; height: 100px; margin: auto; }
适用场景:与方法四类似。移动端首选。
方法六:纯position
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!-- html -->
<div class=
"wrap"
>
<div class=
"center"
></div>
</div>
/* css */
.wrap {
background
: yellow;
width
:
200px
;
height
:
200px
;
position
:
relative
;
}
/**方法一**/
.
center
{
background
:
green
;
position
:
absolute
;
width
:
100px
;
height
:
100px
;
left
:
50px
;
top
:
50px
;
}
/**方法二**/
.
center
{
background
:
green
;
position
:
absolute
;
width
:
100px
;
height
:
100px
;
left
:
50%
;
top
:
50%
;
margin-left
:
-50px
;
margin-top
:
-50px
;
}
/**方法三**/
.
center
{
background
:
green
;
position
:
absolute
;
width
:
100px
;
height
:
100px
;
left
:
0
;
top
:
0
;
right
:
0
;
bottom
:
0
;
margin
: auto
;
}
|
适用场景:适用于所有浏览器,但是方法1需要计算,比较麻烦;方法2使用比较多;方法3在IE低版本浏览器上行不通。
方法七:table方法兼容低版本浏览器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!-- html -->
<div class=
"table"
>
<div class=
"tableCell"
>
<div class=
"content"
>不固定宽高,自适应</div>
</div>
</div>
/*css*/
.table {
height
:
200px
;
/*高度值不能少*/
width
:
200px
;
/*宽度值不能少*/
display
: table;
position
:
relative
;
float
:
left
;
background
: yellow;
}
.tableCell {
display
:
table-cell
;
vertical-align
:
middle
;
text-align
:
center
;
*
position
:
absolute
;
padding
:
10px
;
*
top
:
50%
;
*
left
:
50%
;
}
.content {
*
position
:
relative
;
*
top
:
-50%
;
*
left
:
-50%
;
background
:
green
;
}
|
网上居中的方法还有很多种,这些是我个人常用的几种,与大家共勉。