css文字垂直居中

1、确定高度单行垂直居中
  line-height（兼容低级浏览器）：
  <style>
      .center{height:25px; line-height:25px; overflow:hidden;}  
  </style>
  <div class="center">我是垂直居中</div>

  display:table-cell; vertical-align:middle;（变成表格）：
  <style>
        .center{display:table-cell; height:40px;display:table-cell; vertical-align: middle; overflow:hidden;background:#FAD8E3;}
  </style>
  <div class="center">我是垂直居中</div>
2、确定高度多行文本垂直居中
  display: table;（兼容ie8以上浏览器，包含ie8）
  <style>
      .wrap{dispaly:table; height:400px; width:100px; }
      .content{display:table-cell; vertical-align:middle; border:1px solid #f00; backgroung:#e3e3e3;}
  </style>
  <div class="wrap">
      <div class="content">我是垂直居中，多行文本垂直居中；</div>
  </div>
translate（兼容ie9以上浏览器，包含ie9；此方法也适用于单行文本居中）
  <style>
        .wrap{width: 100px; height: 100px; position: relative; background: #FAD8E3; }
        .center{position: absolute; top: 50%; transform: translate(0,-50%);}
  </style>
  <div class="wrap">
      <div class="center">我是垂直居中，多行文本垂直居中；</div>
  </div>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容