css 布局并排、水平居中、垂直水平居中
前言：css经常会使用并排布局
1.并排布局（float（浮动）实现）
1.使用float（浮动）
html部分
<body>
<div class="main">
<div class="left"> 左侧区域</div>
<div class="right">右侧区域</div>
<div class="clear"></div>
/div>
</body>
css部分
.main .left,.main .right{
border: 1px solid #FE6464;
height: 200px;
text-align: center;
line-height: 200px;
color: #FE6464;
font-size: 30px;
}
.left {
width: 48%;float: left;}
.right{
width: 48%;float: right;}
.clear{
clear: both;}
缺点：float浮动虽然可以实现两个div并排，但是
1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。
2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面
2.并排布局（display:flex（弹性布局）实现）
用display:flex布局，可以解决这两个缺点
.main {
display:flex
}
.left {
flex:1}
.right{
flex:2}
父级元素定义display:flex,子元素宽度用flex来定义,flex 是分割父级元素的占比,如下1:2
3.并排布局之垂直水平居中（display:flex（弹性布局）实现）
参考文章
【1】https://blog.csdn.net/qq_44983621/article/details/104768986
css部分
/*父盒子*/
.testParent{
width: 700px;
height: 200px;
display: flex;
flex-direction: row; /*默认也是row可以不写*/
background-color: #428BCA;
align-items: center; /*这种情况是垂直居中*/
justify-content: center;/*这种情况是水平居中*/
}
/*子盒子*/
.test{
width: 100px;
height: 50px;
background-color: aqua;
}
css中还有其他方法同样也可以实现垂直水平居中
【1】https://blog.csdn.net/weixin_45453819/article/details/122082501
【2】https://blog.csdn.net/qq_33721778/article/details/122165187?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-122165187-blog-122082501.235%5Ev32%5Epc_relevant_default_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-122165187-blog-122082501.235%5Ev32%5Epc_relevant_default_base3&utm_relevant_index=5