位置变化使图像变得正确

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 file

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;
    }