html - 位置变化使图像向右移动

Question

当我将图像的位置更改为固定时，它会向右移动，我无法弄清楚如何让它回到我的页面中心并且仍然使用 position:fixed 属性。请帮忙

提前谢谢你！

CSS:
    header {
        height: 60px;
        color: #413659;
        background-color: #413659;
        margin-top: 30px;
    }

#logo {
        height: 100px;
        width: 100px;
        margin-left: auto;
        margin-right: auto;
        position: fixed;
        top: 10px;
    }

HTML：

<header>

    <img src="http://i.imgur.com/IdtgpVa.png" alt="DP" id="logo">

</header>

Answer 1

尝试这个

#logo {
        height: 100px;
        width: 100px;
        margin-left: -50px;
        margin-right: auto;
        position: fixed;
        top: 10px;
        left:50%;
    }

更新了 jsFiddle 文件

Answer 2

您也可以使用CSS3中的calc()

    left: 45%;
    left: calc(50% - 50px);

http://jsfiddle.net/S8utY/

Answer 3

尝试将其用于您的 CSS：

header {
        height: 60px;
        color: #413659;
        background-color: #413659;
        margin-top: 30px;
    }

#logo {
        height: 100px;
        width: 100px;
        margin-left: 45%;
        margin-right: auto;
        position: fixed;
        top: 10px;
    }