CSS垂直居中

来源：互联网发布：时时彩源码下载编辑：程序博客网时间：2024/06/05 09:27

这里主要说了四种垂直居中的方法

设置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="../content-test/0.jpg" 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="../content-test/0.jpg" 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="../content-test/0.jpg" 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 table_pos">  <div class="sub">    <div class="content">      深刻的发就是开的房间卡死金风科技奥      <p>斯卡放假额我开房间看到积分卡圣诞节</p>      <img src="../content-test/0.jpg" alt=""/>    </div>  </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="../content-test/0.jpg" 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="../content-test/0.jpg" 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="../content-test/0.jpg" alt=""/>        </div>      </div>    </div>    <div class="wrap trans">      <div class="content">        深刻的发就是开的房间卡死金风科技奥        <p>斯卡放假额我开房间看到积分卡圣诞节</p>        <img src="../content-test/0.jpg" alt=""/>      </div>    </div>  </body></html>

0 0