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

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

水平居中

方法一： 定宽 + margin: 0 auto

<div class="parent">
       <p class="child">我是子元素</p></div><style>.child{    width: 100px;    margin: 0 auto;
}</style>

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

<div class="txtCenter">xxx</div><div class="imgCenter"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx" /></div><style>div.txtCenter{   text-align:center;
}.imgCenter{   text-align:center; 
}</style>

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

<div class="parent">
       <p class="child">我是子元素</p></div><style>.parent{    display:table;
}.child{    margin: 0 auto;
}</style>

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

<div class="parent">
       <p class="child">我是子元素</p></div><style>.parent{    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    justify-content: center;/*指定水平居中*/}</style>

垂直居中

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

<div class="parent">
       <p class="child">我是子元素</p></div><style>.parent {    display: table;
}.child {    display: table-cell;    vertical-align: middle;
}</style>

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

<div class="parent">
       <p class="child">我是子元素</p></div><style>.parent{    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/}</style>

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

<div class="parent">xxx</div><style>.parent{    height: 300px;    line-height: 300px;
}</style>

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

<div class="parent">
       <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx"/></div><style>.parent{    height: 300px;    line-height: 300px;
}img{    vertical-align: middle;
}</style>

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

<div class="parent">
       <p class="child">我是子元素</p></div><style>.parent {    position: relative;
}.child {    position: absolute;    top: 0;    bottom: 0;    margin: auto 0;
}</style>

居中万金油

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

<div class="parent">
       <div class="child">xxx</div></div><style>.parent{    position: relative;
}.child{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);
}</style>

图片文字对齐

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

<div class="testTXT">
    <span>XXXX</span></div><style>.testTXT {    height:60px;    line-height:60px;    padding-left:65px;    background:url(xxx) no-repeat left center
}</style>

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

<div class="img">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx" /></div><style>.img {    border: 1px solid black;    width: 200px;    height: 200px;    position: relative;
}.img img {    width: 100px;    height: 100px;    position: absolute;    top: 50%;    left: 50%;    margin: -50px 0 0 -50px;
}</style>

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

<div class="img">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx" /></div><style>.img {    border: 1px solid black;    width: 200px;    height: 200px;    line-height: 200px;    text-align: center;
}.img img {    max-width: 150px;    max-height: 150px;    vertical-align: middle;
}</style>

方法四： css3 display:box

<div class="img">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx" />
    <span>xxx</span></div><style>.img {    border: 1px solid black;    width: 200px;    height: 200px;    text-align: center;    display: -webkit-box;    -webkit-box-align: center;    -webkit-box-pack: center;    display: -moz-box;    -moz-box-align: center;    -moz-box-pack: center;    display: -o-box;    -o-box-align: center;    -o-box-pack: center;    display: -ms-box;    -ms-box-align: center;    -ms-box-pack: center;    display: box;    box-align: center;    box-pack: center;
}.img img {    width: 100px;    height: 100px;
}</style>

参考文章

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

多列布局

方法一： float + overflow: hidden

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

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

参考文章

CSS布局之多列布局

圣杯布局 && 双飞翼布局

参考文章

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

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