将div与固定div垂直对齐作为父级？

我有一个相对div定位在一个固定的位置div上，我想垂直对齐这第一个div。有没有办法做到这一点？这是我目前的标记：将div与固定div垂直对齐作为父级？

<div class="overlay"> 
    <div id="dialogInvoice"> 
     content 
    </div> 
</div>

的CSS：

.overlay { 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.5); 
    position: fixed; 
    z-index: 10; 
} 

#dialogInvoice { 
    width: 390px; 
    height: 722px; 
    margin: 0 auto; 
    padding-top: 28px; 
    border-radius: 4px; 
    background: #ffffff; 
    position: relative; 
}

对此有何建议？我确实尝试了行高度方法，但这显然只在使用纯文本时才起作用。

来源

2014-05-13 2339870

你能举一个你的目标的例子吗？ –

https://lh6.googleusercontent.com/-VkKe-DFuEsw/TYTXFh3fJuI/AAAAAAAABRI/9rBS08RlJJc/s1600/Screen+shot+2011-03-19+at+9.47.03+PM.png – 2339870

是否需要#dialognvoice “位置：亲属”？你可以这样做，如果你使用position：absolute并设置top：100px和bottom：100px也许 –

如果你的元素没有固定的宽度或高度，那么你不能使用其他解决方案，而不使用JavaScript来计算值。

这是一个替代方案。

#dialogInvoice { 
    width: 390px; 
    height: 722px; 
    padding-top: 28px; 
    border-radius: 4px; 
    background: #ffffff; 
    position: absolute; 
    left:50%; 
    top:50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

来源

2014-05-13 08:21:27 jono

永远不会想到这个解决方案......谢谢！ – 2339870

这个CSS可以做你需要什么：

.overlay { 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.5); 
    position: fixed; 
    z-index: 10; 
} 

#dialogInvoice { 
    margin: 0 auto; 
    padding-top: 28px; 
    border-radius: 4px; 
    background: #ffffff; 
    position: absolute; 
    top: 100px; 
    bottom:100px; 
    left:100px; 
    right:100px; 
}

来源

2014-05-13 08:07:46

你需要添加到您的#dialogInvoice CSS是什么

top: 50%;

，改变保证金

margin: 361px auto;

（ 361是722/2）

它会首先将您的容器推向页面一半，然后将其推回到所需值，该值正好是其高度的一半（361px）

这里是一个jsfiddle以便更好地理解。

来源

2014-05-13 08:16:14 frieder

谢谢你的jsfiddle例子，使它更清晰。 – 2339870

将div与固定div垂直对齐作为父级？

回答

相关问题