html图片文字上下布局,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 (也需要加入兼容语法)

圣杯布局 && 双飞翼布局

作者：Eason_Wong

链接：https://www.jianshu.com/p/e6eedcbb4c4e