美文网首页
CSS垂直居中

CSS垂直居中

作者: jicemoon | 来源:发表于2016-03-14 14:32 被阅读195次

    CSS垂直居中


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

    1. 设置line-height和height为相同的值;
    2. 利用table-cell并设置vertical-align;
    3. 利用position设置;
    4. 利用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>
    

    相关文章

      网友评论

          本文标题:CSS垂直居中

          本文链接:https://www.haomeiwen.com/subject/ekuflttx.html