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>

My Angular指令只是抓取上面的元素并将其CSS position属性更改为absolute并赋予它一个top和left属性。

为什么这不起作用？可以这样做吗？

所以从本质上讲，如果我有一个列，400px并放在我的显示位置0，在这种情况下会发生，并且屏幕是1400px，我喜欢包含的div是显示在x位置（1400-400）/ 2。

如果我有两列，即400px并且在我的显示器上放置在0和410位置，在这种情况下也会出现，并且屏幕是1400px，我喜欢包含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

嗯，我不确定你想要达到的目标，你的判断并不是很清楚。您希望列数是动态还是您选择它？我已经成功解决了这个问题，但我不确定：

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 个答案: