CSS居中布局总结

居中布局

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.垂直居中

YIXUNCMS中秋专版2.0.4

系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应

下载

    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;}

思路：了解属性值特性，分解问题。