1.左右布局：一栏定宽，一栏自适应。
方法：1.float + margin
<div class="right">自适应</div>
/*下面是css部分*/
.left{
width: 200px;
background: pink;
float: left;
display: block;
text-align: center;
line-height: 600px;
}
.right{
margin-left: 210px;
background: skyblue;
text-align: center;
line-height: 600px;
}
方法2：使用position：absolute
<div class="right">自适应</div>
/*下面是css部分*/
.left{
width: 200px;
background: pink;
position: absolute;
top: 9px;
display: block;
text-align: center;
line-height: 400px;
}
.right{
margin-left: 210px;
display: block;
background: skyblue;
text-align: center;
line-height: 400px;
}
左右布局.png
2.左中右布局：两边定宽，中间自适应。
方法1：左右float，中间用margin撑开。缺点是HTML文档里左右两块写在前，中间块写在后。
<div class="right">右栏</div>
<div class="middle">中间栏</div>
.left{
width: 200px;
line-height: 400px;
text-align: center;
background: skyblue;
float: left;
}
.right{
width: 150px;
line-height: 400px;
text-align: center;
background: pink;
float: right;
}
.middle{
line-height: 400px;
text-align: center;
background: lightgreen;
margin-left: 220px;
margin-right: 160px;
}
方法2：左右使用position定位，中间用margin撑开
<div class="middle">中间栏</div>
<div class="right">右栏</div>
* {margin: 0;text-align: center;}
.left{
width: 150px;
line-height: 400px;
background: skyblue;
position: absolute;
top: 0;
left: 0;
}
.middle{
line-height: 400px;
background: lightgreen;
margin: 0 160px;
}
.right{
width: 150px;
line-height: 400px;
background: pink;
position: absolute;
top: 0;
right: 0;
}
左中右布局.png
方法3：flex布局
<div class="middle">中间</div>
<div class="right">右栏</div>
.wrapper{
display: flex;
text-align: center;
}
.left{
width: 200px;
line-height: 300px;
background: lightgreen;
}
.middle{
width: 100%;
background: pink;
marign: 0 20px;
}
.right{
width: 200px;
line-height: 300px;
background: skyblue;
}
三栏flex布局.png
3.水平居中
1.行内元素水平居中，一个属性搞定
.center{
text-align:center;
}
2.块级元素固定宽度，左右margin设为auto
width: 600px;
margin-left: auto;
margin-right: auto;
}
3.居中的元素设置display:table;然后设置margin: 0 auto.这个和上方法2方法有点类似。
display:table;
margin:0 auto;
border:1px solid;
}
<div class="t">利用table水平居中</div>
4.多个块级元素设置inline-block，其父元素设置text-align，这个利用分方法1中的特性
text-align:center;
}
.inner{
display:inline-block;
}
<div class="wrap">
<div class="inner">内部的块元素变成inline-block</div>
<div class="inner">内部的块元素变成inline-block</div>
</div>
5.使用flex布局。父元素上设置display: flex;justify-content: center
display:flex;
justify-content:center;
}
<div class="father">
<div class="son">使用flex布局居中</div>
<div class="son">使用flex布局居中</div>
</div>
4.垂直居中
1.单行文本垂直居中
方法1：设置padding-top和padding-bottom值相等
方法2：设置line-height的值等于height
2.多行文本垂直居中，使用display:table ，table-cell和vertical-align： middle
<span>
这里是第一行文字。<br>
这里是第二行文字。
</span>
</div>
div{
display:table;
width:550px;
height:300px;
}
span{
display:table-cell;
vertical-align:middle;
}
3.块级元素flex垂直居中。利用flex布局中的align-items：center
<div>块级元素需要垂直居中</div>
</div>
.wrap{
display:flex;
align-items: center;
width:550px;
height:300px;
border:4px solid #beceeb;
color:#069;
}
4.使用position+top以及负margin（或者transform或者margin：auto）居中，可以同时在水平方向也居中。
这里包含3种比较相似的方法。
<div class="son">这个是要居中的块，长宽已知</div>
</div>
/*以下部分是css*/
.parent {
width: 400px;
height: 400px;
position: relative; //也可以是absolute或fixed
border: 2px solid;
}
.son {
width:120px;
height: 120px;
border: 2px dashed;
position: absolute;
//方法1.负margin使用需要知道居中元素的尺寸，这里垂直和水平都居中
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -60px;
//方法2.使用transform,不需要知道居中元素的尺寸，这里垂直和水平都居中
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
//方法3：可以对固定尺寸或图片这种自身包含尺寸的元素使用，这里垂直和水平都居中
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
