如何将header内的图片垂直居中对齐？

结合你提供的CSS代码，下面给出几种实用的方案来实现Logo在Header内的垂直居中：

方法一：Flexbox布局（推荐） #

这是现代CSS中最简洁且兼容性良好的方案，只需给Header添加Flex相关属性即可：

header{
    margin-bottom: 10px;
    background: blue;
    display: flex;
    align-items: center; /* 实现垂直居中 */
    /* 若需要固定Header高度，可添加height属性，例如 height: 80px; */
}

#logo{
    margin-left: 10px;
    border: 3px solid black;
}

方法二：行高配合垂直对齐（适用于固定高度Header） #

如果Header有固定高度，可通过设置行高等于Header高度，再给Logo添加垂直对齐属性：

header{
    margin-bottom: 10px;
    background: blue;
    height: 80px; /* 固定Header高度 */
    line-height: 80px; /* 行高与高度一致 */
}

#logo{
    margin-left: 10px;
    border: 3px solid black;
    vertical-align: middle; /* 让Logo垂直居中 */
}

方法三：绝对定位+Transform（灵活定位场景） #

通过绝对定位结合位移实现垂直居中，同样需要Header有固定高度或最小高度：

header{
    margin-bottom: 10px;
    background: blue;
    position: relative; /* 父元素设为相对定位 */
    height: 80px; /* 固定高度 */
}

#logo{
    margin-left: 10px;
    border: 3px solid black;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 向上偏移自身高度的50% */
}

方法四：表格布局（兼容老旧浏览器） #

利用表格原生的垂直居中特性，适合需要兼容IE8及更早版本的场景：

header{
    margin-bottom: 10px;
    background: blue;
    display: table;
    width: 100%; /* 确保Header占满宽度 */
    height: 80px; /* 固定高度 */
}

#logo{
    margin-left: 10px;
    border: 3px solid black;
    display: table-cell;
    vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者Desmazio