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

  • 相关阅读:
    STL的适配器、仿函数学习之一:accumulate和for_each的使用心得
    百度笔试题--------数字拼接,求出最小的那个
    百度面试题----依概率生成
    百度笔试题----C语言版revert
    百度笔度题-----蚂蚁爬杆问题
    Try....Catch......Finally 的执行顺序
    数据库SQL SERVER 2008R2 远程连接配置说明
    C#中的数据库的连接方式分类说明(转载)
    网络通信—udp使用领悟
    (转载)C#网络通信之TCP连接
  • 原文地址:https://www.cnblogs.com/Eton/p/6091096.html
Copyright © 2011-2022 走看看