html - Logo 图像不会完全对齐中心

Question

我已经尝试了所有方法，但没有任何效果!变换:翻译(50%)；似乎有效，但它没有将其对齐到确切的中心。我什至试过 left: 50%;用它。

我花了一个星期的时间弄明白了，但我还是做不到。

我要对齐的图像是一个尺寸为 660 X 150 的 Logo 。

<div id="rectangle"> </div>

<img class="logo" src="Untitled.png">

    <style> 

        .logo {
            position: fixed; 
            width: 35%;
            top: -5px;
            height: auto;

        }

        #rectangle {
            width: 100%;
            height:100px;
            background:#101010;
            position: fixed;
            top: 0;

        }


    </style>

编辑:不，我想将 Logo 与页面中心对齐。矩形 div 是 Logo 的背景颜色。

此外，这些答案均无效。 :(

Answer 1

试试这个:-

使用display: flex; justify-content: center; 元素将 img 居中对齐。

<div id="rectangle" style="display: flex; justify-content: center;"> 

<img class="logo" src="Untitled.png">
</div>
    <style> 

        .logo {
            position: relative; 
            width: 35%;
            top: -5px;
            height: auto;
            text-align:center;
        }

        #rectangle {
        
            width: 100%;
            height:100px;
            background:#101010;
            position: fixed;
            top: 0;

        }


    </style>