如何在 div 中居中图像（高度 - 屏幕的百分比）答案

【问题标题】：How to center image in div (height - % of screen)如何在 div 中居中图像（高度 - 屏幕的百分比）
【发布时间】：2025-12-30 19:00:06
【问题描述】：

我的网站有一个标题，它占据了 20% 的屏幕。我想要一个位于标题中心的图像（占标题高度的 90%）。我将图像水平居中没有问题，但我无法将其垂直居中。代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Website</title>
    <link rel="stylesheet" href="stylingpercent.css" />
</head>

<body>

    <header>
        <div class="logoheader" >
            <img class="mainlogo" src="logo.png" alt="logo">
        </div>

    </header>



</body>

</html>

body {
    margin:0px;
}


.logoheader{
    height: 20vh;
    background:rgb(1,1,1);
    margin:0px;
    text-align: center;
}


.mainlogo { 
    max-height:90%;
}

【问题讨论】：

图片高度是静态的吗？
不，这取决于标题高度
垂直对齐可以参考my answer。这是一个演示：jsbin.com/munak/1/edit
现在可以了！非常感谢！

标签： css html height percentage

【解决方案1】：

添加这个：

line-height: 20vh;

到.logoheader。 DEMONstration.

【讨论】：