css布局考察的知識(shí)點(diǎn)比較綜合，基本就是使用上了所有css的基礎(chǔ)技巧，以下是一些比較常見(jiàn)的場(chǎng)景總結(jié)。

水平居中

方法一： 定寬 + margin: 0 auto

<div class="parent">
       <p class="child">我是子元素</p>
</div>

<style>
.child{
    width: 100px;
    margin: 0 auto;
}
</style>

方法二： 行內(nèi)元素 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>

方法三：對(duì)單行文本使用 line-height

<div class="parent">xxx</div>

<style>
.parent{
    height: 300px;
    line-height: 300px;
}
</style>

方法四： 對(duì)圖片使用 line-height + vertical-align

<div class="parent">
       <img src="xxx"/>
</div>

<style>
.parent{
    height: 300px;
    line-height: 300px;
}
img{
    vertical-align: middle;
}
</style>

方法五： 絕對(duì)定位 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>

??居中萬(wàn)金油

方法：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>

圖片文字對(duì)齊

方法一： 圖片作為背景圖片 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>

方法二： 圖片固定寬高，父容器相對(duì)定位，子容器絕對(duì)定位

<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>

方法三： 圖片寬高自適應(yīng)，使用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>

參考文章

完美實(shí)現(xiàn)文字圖片水平垂直居中

多列布局

方法一： float + overflow: hidden

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

方法三： flex （也需要加入兼容語(yǔ)法）

參考文章

CSS布局之多列布局

圣杯布局 && 雙飛翼布局

參考文章

圣杯布局、雙飛翼布局、Flex布局和絕對(duì)定位布局的幾種經(jīng)典布局的具體實(shí)現(xiàn)示例