CSS：如何集中大於容器的元素？

我有一個有800像素和容器是更小的元素（它使寬度變化的響應），我有這樣的代碼：CSS：如何集中大於容器的元素？

<div id="container"> 
    <div id="popup"> 
    </div> 
</div>

和css：

#container { width: 400px; position: relative; } 
#popup { width: 800px; position: absolute; }

我已經嘗試left: 0, right: 0, margin: auto;但它不起作用箱子左對齊。

這裏是jsbin

來源

2014-02-17 jcubic

爲什麼不將'popup'的'width'改爲100％？ – enyce12

類似[this]（http://jsbin.com/popecefe/4/）？ –

@ enyce12，因爲我想要更大的彈出不等於。 – jcubic

您可以使用margin-left: -(half width)px和left: 50%

使你的代碼中彈出窗口CSS代碼如下：

#popup { 
    position: absolute; 
    width: 300px; 
    background-color: #0a0; 
    height: 20px; 
    top: 100px; 
    left: 50%; 
    margin-left: -150px; 
    z-index: 100; 
}

來源

2014-02-17 11:41:57

-1

如果你改變了左側和右側值-25％，它應該工作。

#popup { 
    left: -25%; 
    right: -25%; 
}

來源

2014-02-17 11:29:28 iamcode

如果彈出框大於300px –

@CarstenLøvboAndersen感謝您的評論，那麼這將不起作用，我正準備接受該答案。 – jcubic

是的，如果大於300px，則確認不起作用... – Shepless

您可以#popup{position: relative;top: 50%;}與top: ((div height/2) - popup height)即top: 130px

來源

2014-02-17 11:54:34

我想將它居中。 – jcubic

您可以對齊使用計算功能。

left：calc（50％ - 200px）; // 50％ - （/彈出的寬度2）

http://caniuse.com/calc（檢查與所有設備和瀏覽器兼容性）

#container { 
    background-color: black; 
    height: 300px; 
    width: 200px; 
    margin:auto; 
    position: relative; 
} 
#popup { 
    position: absolute; 
    width: 400px; // width of popup 
    background-color: #0a0; 
    height: 20px; 
    top: 100px; 
    left:calc(50% - 200px); // 50% - (width of popup/2) 
    right: 0; 
    margin: auto; 
}

在彈出的上面的情況下寬度爲400像素。我們必須在中心對齊popup，所以我們將使用左邊：50％。這將彈出的y位置對齊中心。現在我們必須減去彈出的一半寬度以使其居中。

希望這會有所幫助。

來源

2014-02-17 12:46:40 TechFreak

CSS：如何集中大於容器的元素？

回答

相關問題