css布局考察的知識點比較綜合，基本就是使用上了所有css的基礎(chǔ)技巧宅楞，以下是一些比較常見的場景總結(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>
方法三：對單行文本使用 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>
方法三： 圖片寬高自適應(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>
參考文章
多列布局
方法一： float + overflow: hidden
方法二： columns-width columns-count（IE10以下不支持设捐，需要添加前綴）
方法三： flex （也需要加入兼容語法）
參考文章
圣杯布局 && 雙飛翼布局
參考文章
