CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来。 水平居中 1.1内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。 .center-text { text-align: center; } 1.2块级元素水平居中 通过把固定宽度块级元素的margin-left和margin-right设成auto,就可以使块级元素水平居中。 .center-block { margin: 0 auto; } 1.3多块级元素水平居中 1.3.1 利用inline-block 如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。 .container { text-align: center; } .inline-block { display: inline-block; } 1.3.2 利用display: flex 利用弹性布局(flex),实现水平居中