未知元素CSS水平、垂直居中

未知元素CSS水平、垂直居中

对于已知宽高的元素,无论垂直、水平居中相对来说都是比较容易的,因此主要是谈谈对于未知宽高的元素的水平垂直居中问题。

对于已知宽高的元素,无论垂直、水平居中相对来说都是比较容易的,因此主要是谈谈对于未知宽高的元素的水平垂直居中问题。

居中

transform

利用css3的transform实现对于未知宽高的元素的水平/垂直居中是很容易的

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
//水平/垂直居中
//css
html,body,.container{
width: 100%;
height: 100%;
}
.container{
position: relative;
background: #aaa;
}
.center{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
background: #000;
color: #fff;
}
//html
<body>
<div class="container">
<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
</div>
</body>

flexbox

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
34
35
36
37
38
39
40
41
42
//css
html,body,.container{
width: 100%;
height: 100%;
}
.container{
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21–28, Safari 6.1+ */
display: flex; /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center; /* OLD… */
-ms-flex-align: center; /* You know the drill now… */
-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;
}
.center{
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;
}
//html
<div class="container">
<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
</div>

flexbox有兼容问题,想要查看flexbox的兼容性,请去这里:Flexible Box Layout Module

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//css
html,body,.center{
width: 100%;
height: 100%;
}
.center td{
vertical-align: middle;
text-align: center;
}
//html
<table class="center">
<tbody>
<tr>
<td>我居中<br/>我居中<br/>我居中<br/>我居中</td>
</tr>
</tbody>
</table>

table-cell

既然table能实现,自然也就会想到将display设置为table来实现。当然,该方案是有局限性的,因为IE8以下的浏览器不支持display的table系value,所以你只能在IE8及以上浏览器以及非IE浏览器下才能看到效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//CSS
html,body,.container{
width: 100%;
height: 100%;
}
.container{
display: table;
text-align: center;
}
.center{
display: table-cell;
vertical-align: middle;
}
//html
<div class="container">
<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
</div>

inline-block

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
//css
html,body,.container{
width: 100%;
height: 100%;
}
.container{
text-align: center;
font-size: 0;
}
.container:after,.container span{
display:inline-block;
*display:inline;
*zoom:1;
width:0;
height:100%;
vertical-align:middle;
}
.container:after{
content:"";
}
.center{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:middle;
font-size:16px;
}
//html
<div class="container">
<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
<!--[if lt IE 8]><span></span><![endif]-->
</div>

因为使用inline-block会有间隙,所以这里设置父级font-size:0来消除间隙。由于ie8以下浏览器不支持伪对象::after,于是我们通过IE条件注释为IE8以下浏览器新增一个额外元素span,其作用等同inline-block中的::after。

针对IE下的特别处理

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
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
<div class="box">
<img src="http://www.8090yxs.com/uploads/allimg/140719/1-140G91011135P.jpg" />
</div>

此处要注意字体font-familyfont-size会有所影响,而且个人感觉不是完全居中。