CSS学习笔记四——水平垂直居中/文字图片对齐/多列布局/圣杯布局&双飞翼布局

css布局考察的知识点比较综合，基本就是使用上了所有css的基础技巧，以下是一些比较常见的场景总结。

水平居中

方法一： 定宽 + margin: 0 auto

       
我是子元素

方法二： 行内元素 inline-block + text-align

xxx

方法三： display: table + margin: 0 auto

       
我是子元素

方法四： 父元素display: flex + justify-content: center

       
我是子元素

垂直居中

方法一： display: table-cell + vertical-align: middle

       
我是子元素

方法二： 父元素display: flex + align-item: center

       
我是子元素

方法三：对单行文本使用 line-height

xxx

方法四： 对图片使用 line-height + vertical-align

方法五： 绝对定位 margin: auto 0

       
我是子元素

居中万金油

方法：position: absolute + top + left + transform: translate()

       
xxx

图片文字对齐

方法一： 图片作为背景图片 background-image background-repeat background-size

    XXXX

方法二： 图片固定宽高，父容器相对定位，子容器绝对定位

方法三： 图片宽高自适应，使用line-height，text-align，vertical-align，max-width,max-height

方法四： css3 display:box

    
    xxx

参考文章

完美实现文字图片水平垂直居中

多列布局

方法一： float + overflow: hidden

方法二： columns-width columns-count（IE10以下不支持，需要添加前缀）

方法三： flex （也需要加入兼容语法）

参考文章

CSS布局之多列布局

圣杯布局 && 双飞翼布局

参考文章

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例