垂直居中布局
1 display: flex 布局
flex
2 绝对定位
子绝父相，知道子盒子宽高
子绝父相，不知道子盒子宽高
margin auto的方式
3 块元素的垂直居中
text-aling 和 line-height
结构
左边宽度固定，右边自适应
1 左侧div设置成浮动：float: left，右侧div宽度会⾃拉升适应
float: left
2 左侧固定宽度，右侧 calc(100% - 宽度)
calc
里面的细节 inline-block的坑
3 父元素 display:flex; 自适应元素设置为 flex： 1
display:flex;
display:flex;
4 绝对定位
绝对定位
绝对定位
九宫格布局
效果
1 display: flex + flex-wrap: wrap 布局
flex-wrap: wrap
2 display: grid 布局
display: grid
grid-template-rows / grid-template-columns 规定列和行的尺寸
grid-template-rows 规定网格布局中的行数（和高度）： 值是用空格分隔的列表，其中每个值指定相应行的高度。
grid-template-columns 属性规定网格布局中的列数（和宽度）：值是一个用空格分隔的列表，其中每个值指定相应列的尺寸。
3 float: left 布局
float: left
