动态添加div：固定，动​​态宽度，居中

Question

我知道这是一个常见的问题，但请听我说，因为我没有看到任何有效的解决方案。

这个居中的div完全适用于jsfiddle，但不适用于我的chrome扩展。在我的chrome扩展中，我动态地将带有此css的div附加到给定网页的主体（使用document.body.appendChild），但它没有显示。当我进一步检查时，我可以看到我正在访问的网站正在将它自己的风格应用到我的div;我不确定这是否会影响事情。

http://jsfiddle.net/StEek/

HTML：

.myDiv{
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
    background-color: red;
}

的CSS：

<div class="myDiv">
    <p>coolio</p>
</div>

有没有办法动态添加一个div，只有我的风格应用于任何网页？我想要一个固定的，动态的宽度居中的div，它将被附加到body元素。

Answer 1

您需要为您的div id设置并为id而不是class元素设置样式。

如果网站为网页上的所有div设置样式，则需要使用自己的样式覆盖这些样式。