div垂直水平居中经常使用的方法

通过定位:

  父级元素:position: relative;

  子元素:

       position: absolute;  

      top:50%;

      left:50%;

      transform: translate(-50%,-50%);  // 在不确定自身的高度时

      margin: -100px 0 0 -200px;   //  确定自身的高度时,margin-top:负的自生高度一半;margin-left:负的自生宽度一半;

使用弹性盒子

  父级元素:display: flex;

         align-items: center;

       justify-content: center;

使用 display: table-cell;

  父级元素: display: table-cell;

       vertical-align: middle;

  子元素: margin:0 auto;

posted @ 2018-09-13 11:33  sunshine-鸿  阅读(151)  评论(0编辑  收藏  举报