css文字垂直居中

无尾熊
无尾熊 发布于 2017-02-17 17:17:13 浏览:235 类型:原创 - 随笔 分类:HTML/CSS - 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; vertical-align: middle; overflow:hidden;background:#FAD8E3;}
      </style>
      <div class="center">我是垂直居中</div>
      css文字垂直居中
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>

      button标签(此方法也适用于单行文本居中)
      <style>button{width:200px;height:100px;background: #FAD8E3;border:0 none;outline:none;}</style>
      <button>我是垂直居中,多行文本垂直居中;</button>

      display:inline-block与vertical-align
      .wrap {width: 200px; height: 100px; background: #0000ff; font-size:0;} .wrap:before {content: ''; display: inline-block; vertical-align: middle; height: 100%;}
      .content {display: inline-block; vertical-align: middle; font-size:16px;}
      <div class="wrapper">
            <div class="content">我是垂直居中,多行文本垂直居中; </div>
      </div>

      display: flex;
      .center2{width: 200px;height: 100px;display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox; -webkit-align-items: center;align-items: center;margin: 20px 0;background: #FAD8E3;}
      <div class="center2">我是垂直居中,多行文本垂直居中;</div>
      css文字垂直居中
标签:
z
给个赞 1 人点赞
收藏 5 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
无尾熊 无尾熊 作者

无尾熊的鳄鱼先生“不是红豆的汤圆不需要蘸酱油 ”

作者最新