zoukankan      html  css  js  c++  java
  • CSS居中布局总结

    居中布局

    <div class=”parent”>

      <div class=”child”>demo</div>

    </div>

    1.水平居中

        1>     方案一 inlink-block+text-align

                 .child {display:inlink-block;}

                 .parent {text-align:center;}

                 优点:兼容性好

                 缺点:子元素宽高不可设置

        2>     方案二 table+margin

                 .child {display:table; margin:0 auto;}

                 优点:只需要设置child(自己)

        3>     方案三 absolute+transform

                 .parent {position:relative;}

                 .child {position:absolute;left:50%;transform:translateX(-50%);}

                 优点:子元素不会对其他元素产生影响

                 缺点:兼容性问题

        4>     方案四 flex+justify-content

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

                 优点:只需设置parent节点

                 或者设置为

                 .parent {display:flex;}

                 .child {margin:0 auto;}

                 缺点:flex低版本ie不支持

    2.垂直居中

        1>     方案一 table-cell+vertical-align

                 .parent {display:table-cell;vertical-align:middle;}

                 优点:只需设置父节点,兼容性好

        2>     方案二 absolute+transform

                 .parent {position:relative;}

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

                 优点:子元素不会对其他元素产生影响

                 缺点:兼容性问题

        3>     方案三 flex+align-items

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

                 优点:只需设置父节点

                 缺点:兼容性问题

    3.水平和垂直均居中

         1>     方案一 inline-block+text-align+table-cell+vertical-align

                  .parent {text-align:center;display:table-cell;vertical-align:middle;}

                  .child {display:inline-block;}

         2>     方案二 absolute+transform

                  .parent {position:relative;}

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

         3>     方案三 flex+justify-content+align-items

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

     本文转自:http://www.cnblogs.com/xiaohangzi/p/6090995.html

  • 相关阅读:
    Unique Binary Search Trees 解答
    Unique Paths II 解答
    Unique Paths 解答
    Maximum Subarray 解答
    Climbing Stairs 解答
    House Robber II 解答
    House Robber 解答
    Valid Palindrome 解答
    Container With Most Water 解答
    Remove Duplicates from Sorted List II 解答
  • 原文地址:https://www.cnblogs.com/lianzhibin/p/6091284.html
Copyright © 2011-2022 走看看