CSS 垂直居中的方案

.parent > .child,尽量不让 parent 定高

1、.parent 不定高,使用 padding 加 line-height 撑开即可 预览链接

  <style>
    .parent{
    border: 1px solid green;
    line-height: 30px;
    padding: 15px 0;
  }
  </style>
  <div class="parent">
    <div class="child">
      Mac
    </div>
  </div>

如果 parent 不得不定高,

1、CSS 自带属性实现,兼容IE ( 预览地址 )

  • <table> <tr> <td>
  <style>
    table{
      height: 500px;
      border: 1px solid black;
    }
    
    .child{
      border: 3px solid green;
    }
  </style>
  <table>
    <tr>
      <td>
        <div class="child">
          一串文字一串文字一串文字一串文字一串文字一串文字一串文字
        </div>
      </td>
    </tr>
  </table>

2、上面方法的变形,支持IE( 预览地址

 <style>
    .table{
      display: table;
      height: 500px;
      border: 1px solid black;
    }
    
    .tr{
      display: table-row;
      border: 1px solid grey;
    }
    .td{
      display: table-cell;
      border: 1px solid red;
      vertical-align: middle;
    }
    .child{
      border: 3px solid green;
    }
  </style>
  <div class="table">
    <div class="tr">
      <div class="td">
        <div class="child">
          一串文字一串文字一串文字一串文字一串文字一串文字一串文字
        </div>
      </div>
    </div>
  </div>

3、伪类方法,预览地址 支持IE

  <style>
    .parent{
      height: 500px;
      border: 1px solid green;
      /* text-align: center; */
    }
    
    .child{
      border: 1px solid red;
      width: 300px;
      display: inline-block;
      vertical-align: middle;
    }
    .parent:before{
      content: '';
      outline: 3px solid blue;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
    .parent:after{
      content: '';
      outline: 3px solid blue;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  </style>
  <div class="parent">
    <span class="before"></span><div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div><span class="after"></span>
  </div>

4、绝对定位 预览地址

<!--4.1 兼容IE-->
  <style>
    .parent{
      height: 500px;
      border: 1px solid red;
      position: relative;
    }
    
    .child{
      width: 300px;
      border: 1px solid green;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      height: 100px;
      margin-top: -50px;/*如果要做到水平居中,需要添加 height,即高度确定;
    }
  </style>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>​
    
<!--4.2 不支持IE,不知道.child 的宽高时依然可以垂直+水平居中-->
  <style>
    .parent{
      height: 500px;
      border: 1px solid red;
      position: relative;
    }
    
    .child{
      width: 300px;
      border: 1px solid green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>​
<!--4.3 "margin-auto"垂直定位法 ( http://js.jirengu.com/zigav/3/edit )-->
  <style>
    .parent{
      height: 500px;
      border: 1px solid red;
      position: relative;
    }
    
    .child{
      width: 300px;
      height: 100px;
      border: 1px solid green;
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>​
  </div>

5、flex 布局法( CSS 3属性,不支持IE,预览地址 )

  <style>
    .parent{
      height: 500px;
      border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .child{
      width: 300px;
      border: 1px solid green;
     
    }
  </style>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,365评论 1 88
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 685评论 0 5
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 1,920评论 1 17
  • kvc简述 kvc即键值编码,在iOS中的应用主要体现在开发者通过key访问对象的属性或给对象的属性赋值。这样做最...
    RunnerFL阅读 78评论 0 0
  • 进程: 并发运行:并发运行是多个任务被同时发起运行,但同一时刻这些任务只能有一个处于运行状态。这取决于cpu核心...
    吃猫的鱼0阅读 1,445评论 0 0