CSS垂直居中

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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1赞 92
  • css垂直居中
    使用 CSS 实现居中效果困难吗？显然不是。实际上有许多方法可以实现居中效果，但在具体情况中，我们往往无法判断哪种...
    啊啊啊满阅读 307评论 0赞 0
  • CSS垂直居中和水平居中
    前言 CSS居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂...
    秦至阅读 744评论 1赞 2
  • css 垂直居中的方法
    标签：css-常用技巧 table-cell 式将 center 元素的父容器设置为 display:table,...
    练晓习阅读 530评论 0赞 1
  • CSS垂直居中的6种方法
    垂直居中一直是CSS布局中比较令人头疼的问题，相比于水平居中，垂直居中对于不同的元素类型需要采取截然不同的策略，因...
    文风Yu阅读 55,659评论 2赞 8