是否可以將包含絕對位置div的相對位置div居中？

Question

樣板html / css / etc。

然后

<div>

    <div style="margin:0 auto; position:relative">
        <div data-item data-ng-repeat="item in ItemCtrl.item"></div>
    </div>

</div>

...上面使用了一個非常簡單的Angular模板。 它只是將我的內容絕對定位為一，兩或三列。 如果我將屏幕設置為兩列，則希望它居中。 我可以通過代碼來完成此操作，但是我想要一種更流暢的感覺，並且我懷疑CSS可以做到這一點，但是我遇到了麻煩。

這是我的模板：

<div style="width:400px">
    Content here ...
</div>

我的Angular指令僅獲取上面的元素，並將其CSS position屬性更改為absolute，並為其賦予top和left屬性。

為什么這不起作用？ 能做到嗎？

因此，從本質上講，如果我有一個列，即400px，並將其放置在顯示位置0處（在這種情況下會發生這種情況，並且屏幕處於1400px），我希望將包含div顯示在x位置（ 1400-400）/ 2。

如果我有兩列，分別為400像素，並分別顯示在位置0和410（在這種情況下也會出現），並且屏幕位於1400像素，我希望將包含div顯示在x位置（ 1400-810）/ 2。

更新：這是一個小提琴http://jsfiddle.net/0LLa1rs4/

更新：這是一個解決方案，盡管我不確定它是否最優雅。 歡迎提出任何改善建議。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div style="background-color:blue; position:relative; width:100%; margin:20px auto;">
testing ...


        <div style="position:absolute; width:400px; left:50%; margin-left:-200px">
            <div style="top:100px; left:0px; width:400px; background-color:green; position:absolute">
                Item #1
            </div>

            <div style="top:200px; left:0px; width:400px; background-color:green; position:absolute">
                Item #2
            </div>
        </div>



    </div>
</body>

</html>

Answer 1

好吧，我不確定您要實現的目標，您對jsfiddle不太清楚。 您希望列數是動態的還是您選擇它？ 我做了一個jsfiddle可以回答這個問題，但是我不確定：

http://jsfiddle.net/0LLa1rs4/1/

基本上你應該玩

display: flex;

在子元素上

margin: auto;

Answer 2

從您的小提琴看，您似乎正在嘗試將元素在容器中水平居中。 您的描述掩蓋了這一點。

這是一個簡單的小提琴，其功能與您發布的小提琴相似，但更為簡潔： http : //jsfiddle.net/gunderson/5eLx4r4p/1/

HTML

<div class="container">
    <div class="item">Item 0</div>
    <div class="item">Item 1</div>
</div>

CSS

.container{
    margin: 20px;
    width: 100%;
}

.item{
    width: 400px;
    margin: 20px auto; /* margin (horizontal) auto is what does the centering, as long as width is defined */
    background: green;
}

是否可以將包含絕對位置div的相對位置div居中？

問題描述

2 個解決方案

解決方案1
0 2015-01-14 01:08:56

解決方案2
0 2015-01-14 01:40:26

是否可以將包含絕對位置div的相對位置div居中？

問題描述

2 個解決方案

解決方案1 0 2015-01-14 01:08:56

解決方案2 0 2015-01-14 01:40:26

解決方案1
0 2015-01-14 01:08:56

解決方案2
0 2015-01-14 01:40:26