css让图片水平垂直居中

要实现CSS图片水平垂直居中，可以采用多种方法。这里提供两种常见的做法：

1. 对于块级元素（如`<div>`）包裹图片，结合`text-align`属性和`vertical-align`属性[^1]:

<style>
    .centered-image {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px; /* 图片容器高度 */
    }
    
    img {
        vertical-align: middle; /* 仅对行内元素有效，若在块级元素里，需配合flex */
    }
</style>

<div class="centered-image">
    <img src="your_image_url" alt="Image"> <!-- 你的图片替换此处 -->
</div>

2. 对于行内元素，如`<span>`，使用`line-height`属性来达到垂直居中效果[^2]，但这种方法不适用于包含多行文本的图片：

<div id="box">
    <span>单行内联元素垂直居中显示图片<span style="display: inline-block; vertical-align: middle;">
        <img src="your_image_url" alt="Image">
    </span></span>
</div>

<style>
    #box {
        height: 120px;
        line-height: 120px;
        border: 2px dashed #f69c55;
    }
</style>

如果图片是多行文本，则可能需要考虑使用绝对定位或者其他更适合的方法。