今天看啥
    热点:

      天发国际娱乐官网:”  融入团队,无私奉献。

      CSS布局方案小结,css布局小结


      居中布局

      水平居中

      1)使用inline-block+text-align

      原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。

      用法:对子框设置display:inline-block,对父框设置text-align:center。

      <div class="parent">
          <div class="child">DEMO</div>
      </div>
      .child{
          display: inline-block;
      }
      .parent{
          text-align: center;
      }

      缺点:child里的文字也会水平居中,可以在.child添加text-align:left;还原

       

      2)使用absolute+transform

      <div class="parent">
          <div class="child">DEMO</div>
      </div>
      .child{
          position: relative;
      }
      .parent{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
      }

      3)使用flex+justify-content

      原理:通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

      用法:先将父框设置为display:flex,再设置justify-content:center。

      <div class="parent">
          <div class="child">DEMO</div>
      </div>
      .parent{
          display: flex;
          justify-content: center;
      }

      缺点:低版本浏览器(ie6 ie7 ie8)不支持

      4)使用flex+margin

      原理:通过CSS3中的布局利器flex将子框转换为flex item,再设置子框居中以达到居中。

      用法:先将父框设置为display:flex,再设置子框margin:0 auto。

      <div class="parent">
          <div class="child">DEMO</div>
      </div>
      .parent{
          display: flex;
      }
      .child{
          margin: 0 auto;
      }

      垂直居中

      1)使用absolute+transform

      用法:先将父框设置为position:relative,再设置子框position:absolute,top:50%,transform:translateY(-50%)。

      .parent {
          position:relative;
      }
      .child {
          position:absolute;
          top:50%;
          transform:translateY(-50%);
      }

      2)使用flex+align-items

      原理:通过设置CSS3中的布局利器flex中的属性align-times,使子框垂直居中。

      .parent {
          position:flex;
          align-items:center;
      }

      水平垂直居中

      1)使用absolute+transform

      .parent {
          position:relative;
      }
      .child {
          position:absolute;
          left:50%;
          top:50%;
          transform:tranplate(-50%,-50%);
      }

      2)使用flex+justify-content+align-items

      .parent {
          display:flex;
          justify-content:center;
          align-items:center;
      }

      总结

      以上所述是小编给大家介绍的CSS布局方案小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对帮客之家网站的支持!

      www.1click-soft.comtruehttp://www.1click-soft.com/CSSjc/1314441.htmlTechArticleCSS布局方案小结,css布局小结 居中布局 水平居中 1)使用inline-block+text-align 原理:先将子框由块级元素改变为行内块元素,再通过设置行内...

      相关文章

        暂无相关文章
      相关搜索: Tag:css布局

      帮客评论

      视觉看点
      百度 360 搜狗