本着学习的时候要自己尝试的态度，我在网上看了几种场景的布局，并试着自己将其写出来，在此总结下。
一、div水平垂直居中
html：父div + 子div
方法1：父div相对定位，子div绝对定位，配合css属性transform和translate调整定位。
代码：
<style>
.container{
width: 500px;
height: 500px;
margin: 0 auto 20px auto;
border: 1px solid salmon;
position: relative;
}
.c1 {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 下面这几个与定位无关，只是为了更好看点*/
text-align: center;
line-height: 100px;
background-color: #409EFF;
color: white;
}
</style>
<div class="container">
<div class="c1">居中div</div>
</div>
方法2：
使用display:flex ，flex的存在解决了一个很麻烦的问题，就是垂直居中问题
<style>
.container2 {
display: flex;
justify-content: center;
align-items: center
}
.c2 {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #409EFF;
color: white;
}
</style>
<div class="container container2">
<div class="c2">居中div</div>
</div>
界面效果均为：
image.png
二、两列布局：左侧宽度固定，右侧自适应
html：一个父div，两个子div
方法1：父级div设置position:relative; 左侧div设置绝对定位position:absolute，右边的div设置margin-left
<style>
.left{
width: 50px;
height: 100%;
position: absolute;
left: 0;
}
.right{
margin-left: 50px;
height: 100%;
}
</style>
<div class="container container3">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
方法2：左侧div向左浮动，右侧div设置margin-left
<style>
.left{
width: 50px;
height: 100%;
float:left;
}
.right{
margin-left: 50px;
height: 100%;
}
</style>
<div class="container container4">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
方法3：使用display:flex
<style>
.container5 {
display: flex;
}
.left2{
width: 50px;
}
.right2{
flex: 1;
}
</style>
<div class="container container5">
<div class="left2">左侧</div>
<div class="right2">右侧</div>
</div>
页面效果均为：
image.png
