CSS垂直居中
这里主要说了四种垂直居中的方法
- 设置line-height和height为相同的值;
- 利用table-cell并设置vertical-align;
- 利用position设置;
- 利用position:absolute和css3 transform属性进行居中;
另外还有一种是利用padding-top和padding-bottom, 这种写法, 就不贴代码了
下面一一介绍
一. 首先说一下上述第一种(line-height)
下面是对应的css样式;
div.wrap.lh {
height: 200px;
line-height: 200px;
overflow: hidden;
background-color: #ffccff;
/*用于水平居中**/
text-align: center;
}
/*如果内含图片, 并需要图片也居中, 请加上此句样式**/
div.wrap.lh img{
vertical-align: middle;
}
对应的测试html
<div class="wrap lh">开上缴<span style="color:red;">费卡</span>就是快机费<img src="" alt=""/></div>
注: 此种写法, 只适合用于内容为单行并且都是行内元素, 当内容出现块元素就不适用了
二. 利用table-cell并设置vertical-align
样式如下
div.wrap.table {
display: table;
height: 300px;
}
div.wrap.table > * {
vertical-align: middle;
display: table-cell;
/**下面非必须, 为了样式好看才加的**/
border: 1px solid #ff0099;
background-color: #ffccff;
padding: 0 20px;
}
/**下面非必须, 为了样式好看才加的**/
div.wrap.table > * + * {
border-left: none;
}
对应测试html
<div class="wrap table">
<div>现在我们要使这段文字垂直居中显示！</div>
<div>
<pre>
div.table-wrap{
display: table;
height: 60px;
}
div.table-wrap *{
vertical-align: middle;
display: table-cell;
border: 1px solid #ff0099;
background-color: #ffccff;
}
</pre>
</div>
<div>
<img src="" alt=""/>
</div>
</div>
注: 此种写法, 只适合用于IE8以上的版本, IE6/7不支持display:table这样的样式, 所以没办法支持这种写法
三. 利用position设置
CSS及HTML如下
div.wrap.pos {
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
height: 200px;
position: relative;
}
div.wrap.pos .sub {
position: absolute;
border: 1px solid #000;
top: 50%;
}
div.wrap.pos .sub .content {
border: 1px solid #ff6600;
position: relative;
top: -50%;
}
<div class="wrap pos">
<div class="sub">
<div class="content">深刻的发就是开的房间卡死金风科技奥<br/>斯卡放假额我开房间看到积分卡圣诞节</div>
</div>
</div>
注: 此种写法, 只适合用于IE6/7, 其他标准浏览器均不支持此种写法
四. 利用position:absolute和css3 transform属性进行居中
div.wrap.trans {
position: relative;
height: 300px;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
}
div.wrap.trans .content {
position: absolute;
/*水平-垂直居中*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wrap trans">
<div class="content">
深刻的发就是开的房间卡死金风科技奥
<p>斯卡放假额我开房间看到积分卡圣诞节</p>
<img src="" alt=""/>
</div>
</div>
注: 此种写法, 只适合用于标准浏览器和IE9+, 即支持transform/translate属性的浏览器
五. 下面整合上述二/三两种写法, 组合一种适合所有主流浏览器的写法
代码如下
div.wrap.table_pos {
display: table;
*position: relative;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
height: 200px;
}
div.wrap.table_pos .sub {
display: table-cell;
vertical-align: middle;
*position: absolute;
*top: 50%;
}
div.wrap.table_pos .sub .content {
*position: relative;
*top: -50%;
}
<div class="wrap trans">
<div class="content">
深刻的发就是开的房间卡死金风科技奥
<p>斯卡放假额我开房间看到积分卡圣诞节</p>
<img src="" alt=""/>
</div>
</div>
注: 此种写法, 支持IE6+/FF/Chrome/Opera/Safari等所有主流浏览器
最后贴出上述所有写法的测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*line-height=height ==> 单行&&行内元素**/
div.wrap {
margin-bottom: 15px;
}
div.wrap.lh {
height: 200px;
line-height: 200px;
overflow: hidden;
background-color: #ffccff;
text-align: center;
}
img{
vertical-align: middle;
}
/**display: table ==> ie8+ **/
div.wrap.table {
display: table;
height: 300px;
}
div.wrap.table > * {
vertical-align: middle;
display: table-cell;
border: 1px solid #ff0099;
background-color: #ffccff;
padding: 0 20px;
}
div.wrap.table > * + * {
border-left: none;
}
/***position ==> IE7(包括IE7)以下***/
div.wrap.pos {
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
height: 200px;
position: relative;
}
div.wrap.pos .sub {
position: absolute;
border: 1px solid #000;
top: 50%;
}
div.wrap.pos .sub .content {
border: 1px solid #ff6600;
position: relative;
top: -50%;
}
/**结合上面两种, 支持IE6+/FF/Chrome/Opera/Safari**/
div.wrap.table_pos {
display: table;
*position: relative;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
height: 200px;
}
div.wrap.table_pos .sub {
display: table-cell;
vertical-align: middle;
*position: absolute;
*top: 50%;
}
div.wrap.table_pos .sub .content {
*position: relative;
*top: -50%;
}
/**CSS3-transform ==> IE9+(支持transform属性的浏览器)**/
div.wrap.trans {
position: relative;
height: 300px;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
}
div.wrap.trans .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="wrap lh">啊开始的房间卡上缴<span style="color:red;">费卡</span>就是快递放假啊快速减肥卡刷卡积分卡手机费<img src="" alt=""/></div>
<div class="wrap table">
<div>现在我们要使这段文字垂直居中显示！</div>
<div>
<pre>
div.table-wrap{
display: table;
height: 60px;
}
div.table-wrap *{
vertical-align: middle;
display: table-cell;
border: 1px solid #ff0099;
background-color: #ffccff;
}
</pre>
</div>
<div>
<img src="" alt=""/>
</div>
</div>
<div class="wrap pos">
<div class="sub">
<div class="content">深刻的发就是开的房间卡死金风科技奥<br/>斯卡放假额我开房间看到积分卡圣诞节</div>
</div>
</div>
<div class="wrap table_pos">
<div class="sub">
<div class="content">
深刻的发就是开的房间卡死金风科技奥
<p>斯卡放假额我开房间看到积分卡圣诞节</p>
<img src="" alt=""/>
</div>
</div>
</div>
<div class="wrap trans">
<div class="content">
深刻的发就是开的房间卡死金风科技奥
<p>斯卡放假额我开房间看到积分卡圣诞节</p>
<img src="" alt=""/>
</div>
</div>
</body>
</html>
