css 图文混排 图片垂直居中

CSS 图文混排是指在网页设计中，将文本和图片组合在一起展示，通常是将图片放置在段落文字的周围或之间。对于图片垂直居中，有几种常见的方法：

1. **使用`display: flex`**：如果容器是`display: flex`布局，你可以通过设置`align-items: center`使其内部元素（包括图片）垂直居中。例如：

   .container {
     display: flex;
     align-items: center;
   }

2. **使用`vertical-align`属性**：针对`inline-block`元素或表格单元格，可以调整`vertical-align: middle`。例如：

   <div class="container">
     <img src="..." style="vertical-align: middle;">
     文字内容...
   </div>

3. **使用`position: relative` + `line-height`**: 如果图片是绝对定位，可以设置其`top`为负值等于图片高度的一半，抵消掉行高影响。例如：

   img {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }

4. **Grid布局**：在CSS Grid中，可以使用`place-items`属性实现对内联项目（如图片）的垂直居中。如：

   .container {
     display: grid;
     place-items: center;
   }