前端开发中垂直居中的技巧-胡新春个人博客 
前端开发中垂直居中的技巧
 作者:赞鱼鱼  发布时间:2018-04-18 16:10:01  访客:413

一、利用 line-height 实现

 .demo1 {
         height: 100px;
         line-height 100px;
 }

适用于:1、高度固定 2、文字单行(多行文字会出现溢出)

二、利用 display:table 实现

.demo-outer {
    display: table;
             }
.demo-outer .demo-inner{
    display: table-cell;
    vertical-align: middle;
}

   

适用于:比较通用,但是会改变元素 display


三、利用 margin 或者 padding 实现

 .demo-outer {
                 height: 100px;
              }
 .demo-outer .demo-inner{
         height: 50px;margin-top: calc((100px - 50px)/2);
          /* 或者 padding-top: calc((100px - 50px)/2); */
  }

适用于:内外元素高度都固定


四、利用 absolute 加 margin 实现

 .demo-outer {
     position: relative;
  }
 .demo-outer .demo-inner{
     height: 50px;position: absolute;top: 50%;margin-top: -25px;
  }

适用于:内部元素高度固定,外部容器的高度可以不定


五、利用 absolute 加 transform 实现

  .demo-outer {
      position: relative;
   }
  .demo-outer .demo-inner{
      position: absolute;top: 50%;transform: translateY(-50%);
   }
   
 适用于:内外元素高度都可以不定,但是像 IE8等老浏览器不支持 transform 属性


六、利用 flex 实现

.demo6 {
         display: flex;align-items: center;
        }


适用于:移动端 flex 还是支持的比较好,PC 端 IE 就不是很给面子了

本文来自:https://blog.zanyuyu.com/2017/03/20/middle-function/

点评一下


程序:HXC博客v2.0 主题:HXC博客前端Funs主题    基于CodeIgniter框架构建
博客平稳运行2年+