CSS居中

By | 2016 年 7 月 1 日

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

transform

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

// 水平/垂直居中
// 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

// 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的兼容性,请去这里:Flexible Box Layout Module

table

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

// 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

// 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。

发表回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据