的问题是在实际工作过程中经常遇到图像文字的混合，图像和一段文字需要垂直居中。 虽然这种实现方式一直以来都非常复杂，但flex是解决这个问题的好方法；
css代码
显示： Flex； flex是Flexible的缩写，意味着灵活性。 具有很好的适应性，因为单行或多行的方框模型可以提供很好的灵活性。
使用文字间距垂直居中对齐的基本用法flex，在文字和图像位于同一行时实现垂直居中对齐。
通过将父元素容器的显示属性设置为flex并将子元素的垂直边距设置为auto，可以将混合字符图像定位在文本的垂直中心。
css代码：
syle.container { display : flex； width:30rem； height:10rem； 背景色： # faf； 位置： absolute； top:50%； left:50%； margin:-5rem 0 0 -15rem； border-radius:2rem； }.icon{width:7rem； height:7rem； 后台- image 3360 URL (img/icon.png )； - WebKit-background-size :100 %； 背景尺寸： 100 % 100 %； margin :自动自动； }p{font-size:20px； margin :自动自动； }/style html代码：
divclass=' container ' divclass=' icon '/divp这是文本/p/div的最后效果。
这样排列，最终实现两个要素的垂直中央。 其实多个要素也同样可以实现。 其中，默认情况下，每个元素的左右边距值匹配。
在web设计中，多个元素均匀分布在一行中，许多块通常均匀分布在一行或多行中。 以前，这种情况是通过固定子元素的大小并将元素的浮点设置为左来实现的，但使用flex可以简化实现过程。
css代码片段：
. container2{width:60rem； height:20rem； 显示： Flex； 背景色： # fdf； justify-content 3360 space-around； /*内部子元素均匀分布在容器内*/}.box{width:8rem； height:8rem； 背景色： # a5a； margin :自动自动； font-size:2rem； color:白色； line-height:8rem； 文本对齐3360中心； } html片段：
divclass=' container2' divclass=' box '1/divdivclass=' box '2/divdivclass=' box '3/divdivclass=' box '4/
这样，即使删除了一个或多个其馀容器中的子元素，也可以均匀放置。
除了将子元素的边距垂直方向设置为auto外，还可以通过设置容器元素对齐项来控制子元素的垂直中心
css代码片段：
. container3{width:60rem； height:20rem； 显示： Flex； 背景色： # fdf； justify-content 3360 space-around； align-items3360中心； }.box2{width:8rem； height:12rem； 背景色： # c5a； font-size:2rem； color:白色； line-height:12rem； 文本对齐3360中心； } html代码片段：
divclass=' container3' divclass=' box '1/divdivclass=' box2'2/divdivclass=' box '3/divdivclass=' box2' 4
对齐项3360 center|flex-start|flex-end|stretch|baseline
分别用中心轴线、容器上缘、容器下缘、高度填满容器，用基准线(文字)表示
其中也有很多属性需要一个个仔细实验
包括在内
justify-content:/*在主轴上的对齐方式*/flex-direction:/*顺序*/flex-wrap:/*换行*/justify-content属性justify
flex-start:从左侧或顶部排列
flex-end:从右边或底部排列
center:中间数组
空间Around :中的每个元素占用相同的空间，包括margin
space-between:的第一个和最后一个元素并排排列，所有中心元素之间的放置距离相同
flex-wrap属性flex-wrap属性指定当不能容纳在一行中时是否换行
. container4{display:flex； 背景色： # f99； padding:20px； flex-wrap :否- wrap； /*这默认为no-wrap无换行*/} html:
divclass=' container4' divclass=' box '1/divdivclass=' box '2/divdivclass=' box '3/divdivclass=' box '4/。
但是，如果容器容器的长度小于子元素的总宽度，容器将不会换行，因此将压缩内部元素的宽度
如果在下面添加几个元素，就会变成这样。
但是，在大多数情况下，容器的flex-wrap属性设置为wrap (自动换行)，因为这不是我们想要的
. container4{display:flex； 背景色： # f99； padding:20px； flex-wrap:wrap； /*缺省情况下，它不会在no-wrap中换行*/} :
这将使容器中的子元素保持其原始宽度。