動態添加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，該div將附加到body元素上。

Answer 1

您需要給div一個id並為該id設置樣式，而不是class元素。

如果網站為網頁上的所有div設置了樣式，則您需要使用自己的樣式來覆蓋這些樣式。