目录
2、float+margin-left 完成左列定宽，右列自适应
3、position: absolute;+ margin-left 完成左列定宽，右列自适应
一、行内块级水平垂直居中方案。
1、设置行高等于容器高度；
2、通过text-align：center；实现水平居中
.box{
line-height: 200px;
text-align: center;
}1、将子集元素设置为水平块级元素
2、通过tical-aline：middle；实现垂直居中
.box1{
display: inline-block;
vertical-align: middle;
}二、定位实现水平垂直居中方案（一）
1、使子元素相对于本元素定位
2、开启绝对定位
3、设置该元素的偏移量，值为50%减去宽度/高度的一半
.box{
width: 200px;
height: 200px;
background-color: aqua;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: antiquewhite;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
} <div class="box">
<div class="box1">
</div>
</div>三、定位实现水平垂直居中方案（二）
1、使子元素相对于本元素定位
2、开启绝对定位
3、设置该元素的偏移量，值为50%
4、再向上、向左移动50px；（盒子宽高的一半）
.box{
position: relative;
}
.box1{
position: absolute;
left: 0;
top: 0;
margin-left: -50px;
margin-top: -50px;
}四、定位实现水平垂直居中方案（三）
1、使子元素相对于本元素定位
2、开启绝对定位
3、将元素拉满整个容器
4、通过margin：auto；实现水平居中
.box{
position: relative;
}
.box1{
position: absolute;
left: 0;
top: 0;
right:0;
bottom: 0;
margin: auto;
}五、定位实现水平垂直居中方案（四）
1、使子元素相对于本元素定位
2、开启绝对定位
3、设置该元素的偏移量，值为50%
4、通过transform: translate(-50%,-50%);反方向偏移的方式，实现居中
.box{
position: relative;
}
.box1{
position: absolute;
left: 0;
top: 0;
transform: translate(-50%,-50%);
}六、flex方案
1、将元素设为flex布局
2、通过justify-content: center;和align-items: center;实现
.box1{
display: flex;
justify-content: center;
align-items: center;
} .box1{
background-color: violet;
width: 100px;
height: 100px;
}或者通过margin: auto;来实现也可
.box1{
margin: auto;
}七、Grid方案
1、将元素至设为Grid元素
2、 通过 items来实现
.box{
justify-items: center;
align-items: center;
}3、或者 通过 centent来实现
.box{
justify-content: center;
align-content: center;
}4、过着通过self属性
.box1{
align-self:center;
justify-self: center;
}5、或者通过margin: auto;来实现也可
.box1{
margin: auto;
}注意：content 缩写：place-content: center;
self 缩写：place-self: center;
items 缩写：place-items: center;
八、两列布局法
1、float+calc（）完成左列定宽，右列自适应
1、左列设置浮动
2、右列设置浮动
3、宽度减去左列的宽度
.box{
float: left;
}
.box1{
float: left;
width: calc(100% - 50px);
}2、float+margin-left 完成左列定宽，右列自适应
1、左列设置浮动
2、通过外边距的方式使该容器的左边有100px
.box{
float: left;
}
.box1{
margin-left: 100px;
}3、position: absolute;+ margin-left 完成左列定宽，右列自适应
1、开启定位，脱离文档流
2、2、通过外边距的方式使该容器的左边有100px
.box{
position: absolute;
}
.box1{
margin-left: 100px;
}4、float+overflow 完成左列定宽，右列自适应
1、左列设置浮动
2、右侧自适应元素设置，overflow 会创建一个BFC完成自适应
.box{
float: left;
}
.box1{
overflow: hidden;
}