CSS学习笔记四——水平垂直居中/文字图片对齐/多列布局/圣杯布
2018-08-10 本文已影响9人
Rocky_Wong
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 （也需要加入兼容语法）
参考文章
圣杯布局 && 双飞翼布局
参考文章
