我正在尝试使一个div垂直居于父div的中心，但同时我不希望子div不响应。
这是HTML代码
<div class="wrap">
<div style="background: url('http://www.screensavergift.com/wp-content/uploads/GoldenNature2-610x320.jpg') no-repeat; background-position: 25% 50%; background-size: cover;" class="menu_item"></div>
<div class="menu-box-border"></div>
<div class="menu-box-content-box">
<h3>Some Text</h3>
</div>
</div>
我在这里创建了一个演示-http: //jsfiddle.net/squidraj/4eewp8x0/7/
如您所见，带有覆盖层的半透明框始终位于底部，并且在浏览器调整大小时，该框也正在调整大小，因此，覆盖框对文本造成了问题。
如有任何帮助/建议，我们将不胜感激。提前致谢。
首先，有一个众所周知的技巧可以做到这一点，您可以在https://css-tricks.com/centering-in-the-unknown/上阅读
这将为您提供：http : //jsfiddle.net/4eewp8x0/8/
但是，随着我们拥有越来越强大的CSS3工具，我想提出一些技巧。
这个技巧的本质是我们将孩子绝对定位在(50%,50%)，然后翻译(-50%,-50%)
您将拥有：http : //jsfiddle.net/4eewp8x0/9/
最后，那些对对齐元素的困难充满了愤怒的人提出了弹性布局。
您可以在此处阅读有关Flex布局的信息：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
您将拥有：http : //jsfiddle.net/4eewp8x0/11/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句