Question

我正在尝试将类似iPad的popover div作为练习，但我无法找到如何垂直居中的popover div，具有未指定的内容宽度/高度。

http://jsfiddle.net/mbYyR/5/

我希望三角形指向＃popover-wrapper的上/下右/左值定义的位置，但top: -50%不起作用。

感谢您的帮助：）

Answer 1

您可以使用jquery修复此问题，请检查fiddle link

Answer 2

如果您不想使用javascript，则无法垂直居中（如前所述）。但是，如果你的目标只是让一个漂亮的弹出窗口允许一些灵活的宽度/高度，我推荐以下纯CSS解决方案。每个部分都会有一些解释，说明我做了什么以及为什么要这样做。

选项＃1 HTML（我的首选）

<div id="popover-wrapper">
    <div id="popover-direction-setter">
        <div id="actual-popover-div">
            <div id="content-with-unknown-height">
                Content Content with unknown dimensions. Tip should point to the blue dot
                Content with unknown dimensions. Tip should point to the blue dot
                Content with unknown dimensions. Tip should point to the blue dot
            </div>   
        </div> 
    </div>
</div>
<div id="target-blue-dot"></div>

三角形div消失了，因为我将使用:after伪类来应用它，因为它纯粹是表示性的。

选项＃1 CSS（注意#triangle-tip代码已替换为#popover-direction-setter:after）

#popover-direction-setter {
    position: absolute;
    right: 20px; /* grow left */
    top:   0px;
    background: #EEE; /* for debugging */
    width: 160px; /*left position of wrapper - 40px for right position of this and triangle tip border size */
}

#actual-popover-div {
    position: absolute;
    right: 0px;
    top: -.5em;
    margin-top: -25px; /* border-radius + half the height of the triangle */
    padding: 0.5em;
    background: black;
    color: white;
    border-radius: 15px;
    min-height: 50px; /* 2 * border radius + half the height of the triangle */
}

#popover-direction-setter:after {
    content: '';
    position: absolute;
    width:  0;
    height: 0;
    top:           50%;
    margin-top:   -20px;
    border-top:    20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left:   20px solid black;
    right:        -20px;
}

#popover-direction-setter设置width时不要惊慌。我假设你知道left位置（因为你使用它），所以这个width可以预先计算出来并且弹出最大宽度，以便它最终不会从浏览器窗口的左侧流出。我认为这将是一件好事。

min-height设置在#actual-popover-div上，因此如果内容最小，则三角形看起来很好。

top的{{1}}位置抵消了#actual-popover-div em的{{1}}尺寸。该元素上的padding只是碰撞到足以使箭头恰好位于上角，并在margin-top生效时居中。

选项＃2 HTML（保留三角形min-height但重新定位）

div

选项＃2 CSS保留原来的三角形<div id="popover-wrapper"> <div id="popover-direction-setter"> <div id="actual-popover-div"> <div id="content-with-unknown-height"> Content Content with unknown dimensions. Tip should point to the blue dot Content with unknown dimensions. Tip should point to the blue dot Content with unknown dimensions. Tip should point to the blue dot </div> </div> <div id="triangle-tip"></div> </div> </div> <div id="target-blue-dot"></div>并删除我的div伪类代码。

我知道这并不能完全满足您的挑战要求。同样，我同意其他人的意见，目前没有办法将一个元素放置在一个垂直居中的高度不确定的位置。但是，如果没有别的，其他人可能会发现我的解决方案对他们有利。

Answer 3

我很确定#actual-popover-div没有移动，因为它设置为position: relative。将其设置为postion:absolute并更改某些值似乎可以获得您正在寻找的效果。

示例：http://jsfiddle.net/mbYyR/8/

Answer 4

要做的一件事就是按原样设置最高位置，并设置负边距值。您可以在不使用jQuery的情况下通过此方法实现效果。

Answer 5

我的纯HTML + CSS解决方案（虽然需要一些清理）：

http://tinkerbin.com/f2LIo7RM

垂直居中的popover div

5 个答案: