1、flex垂直分布布局
给三个元素一个容器,用标签包裹起来,用它来做布局
![在这里插入图片描述](https://img-blog.csdnimg.cn/aab40e80aa3d4a7794a976bf76bb6b35.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2VpeGluXzQzMDM3MjU3,size_20,color_FFFFFF,t_70,g_se,x_16)
2、在容器外面设置css属性,可以控制容器内部子元素的布局。
.container{
display = flex; 设置flex布局方式
flex direction = column; 垂直排列
}
3、flex布局的align-items,设置居中
.container{
display = flex; 设置flex布局方式
flex direction = column; 垂直排列
align-items:center; 设置居中
}
4、设置