在CSS中，将一个包含div，span和img的元素居中对齐，通常涉及到几个关键的CSS属性。下面是四种方法来实现这个目标：

方法1：使用Flexbox
将div设置为Flex容器，然后使用justify-content和align-items属性来居中对齐内容。

<div class="center-container">
   <span>文本内容</span>
   <img src="image.jpg" alt="示例图片">
</div>

.center-container {
   display: flex;
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
   height: 100px; /* 指定一个高度，以便垂直居中有意义 */
}

方法2：使用Grid
使用CSS Grid同样可以轻松实现居中对齐。

<div class="center-container">
   <span>文本内容</span>
   <img src="image.jpg" alt="示例图片">
</div>

.center-container {
   display: grid;
   place-items: center; /* 同时水平和垂直居中 */
   height: 100px; /* 指定一个高度 */
}

方法3：使用绝对定位和Transform
这种方法适用于当你想要在某个具体容器内居中对齐元素，并且不希望改变容器本身的布局属性。

<div class="center-container">
   <span>文本内容</span>
   <img src="image.jpg" alt="示例图片">
</div>

.center-container {
   position: relative; /* 创建定位上下文 */
   height: 100px; /* 指定一个高度 */
}

.center-container span, .center-container img {
   position: absolute; /* 使用绝对定位 */
   top: 50%; /* 向上移动元素50% */
   left: 50%; /* 向左移动元素50% */
   transform: translate(-50%, -50%); /* 向相反方向移动自身大小的50%，实现居中 */
}

方法4：使用Text Align和Vertical Align（针对文本和图片）
如果你的div主要是为了包含文本和图片，并且你想要文本和图片在同一行内居中，可以使用text-align和vertical-align（对于图片）。但通常这种方法用于文本对齐，对于图片可能需要额外的包装或调整。

<div class="center-container">
   <span>文本内容</span> <img src="image.jpg" alt="示例图片">
</div>

.center-container {
   text-align: center; /* 水平居中文本和图片 */
}

对于图片，如果你想要它在垂直方向上居中，通常需要结合其他方法，如Flexbox或Grid，因为vertical-align主要影响行内元素（如span）的垂直对齐。如果图片是行内元素（通过CSS如display: inline;或display: inline-block;设置），你可以这样做：

.center-container img {
   vertical-align: middle; /* 使图片在行内元素中垂直居中 */
}

但更常见的是将图片作为块级元素处理，这时使用Flexbox或Grid会更加合适。

结论：
通常，Flexbox或Grid是处理这类布局问题的首选方法，因为它们提供了更加灵活和强大的布局控制能力。选择哪种方法取决于你的具体需求和布局的复杂性。