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 src="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 src="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 src="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 src="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 src="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布局和绝对定位布局的几种经典布局的具体实现示例