Question

我试图让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/

正如您所看到的，带有叠加层的半透明框始终位于底部，并且在浏览器调整大小时，框也会调整大小，因此叠加框会导致文本出现问题。

非常感谢任何帮助/建议。提前谢谢。

Answer 1

首先，有一个众所周知的技巧，你可以在https://css-tricks.com/centering-in-the-unknown/上阅读

这将为您提供：http://jsfiddle.net/4eewp8x0/8/

然而，由于我们拥有越来越强大的CSS3工具，我想提供更多技巧。

CSS转换

这个技巧的实质是我们绝对将孩子定位在(50%,50%)，然后翻译(-50%,-50%)

您将拥有：http://jsfiddle.net/4eewp8x0/9/

Flex布局

最后，那些对困难对齐元素充满愤怒的人们提出了弹性布局。

您可以在此处阅读有关flex布局的信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您将拥有：http://jsfiddle.net/4eewp8x0/11/

非响应垂直居中div的问题

1 个答案: