如何将abs pos box置于已经居中的包装盒内？

Question

如何将一个绝对定位的盒子放在已经居中的包装盒中？

IE中。这样：

应该是：

.main {
    height: 300px;
    background: lightgrey;
    display: flex;
}
.wrapper {
    margin: 0 auto;
}
.dropdown {
    position: absolute;
    color: white;
    background: blue;
    text-align: center;
}
.dropdown a {
    display: block;
}

<div class="main">
    <div class="wrapper">
        <a>Lorem</a>
        <div class="dropdown">
          <a>Lorem ipsum</a>
          <a>Dolor sit amet consectetur</a>
          <a>Adipisicing elit</a>
        </div>
    </div>
</div>

Answer 1

您可以将位置更改为相对位置。

e.g。 http://jsfiddle.net/7vgxug6k/

.dropdown {
    position: relative;
    color: white;
    background: blue;
    text-align: center;
}

修改：也使超链接居中： http://jsfiddle.net/7vgxug6k/2/

Answer 2

因此，当你定位绝对时，你想要定义你的div的宽度，然后对你绝对定位的方向做一个边距。边距应该是您定义宽度的一半。

在这种情况下：

    left:50%;
    width:200px;
    margin-left:-100px;

http://jsfiddle.net/pqfq3m6z/

 .main {
        height: 300px;
        background: lightgrey;
        display: flex;
    }
    .wrapper {
        margin: 0 auto;
    }
    .dropdown {
        position: absolute;
        color: white;
        background: blue;
        text-align: center;
        left:50%;
        width:200px;
        margin-left:-100px;
    }
    .dropdown a {
        display: block;
    }