Vydanie s nereagujúcim vertikálne centrovaným div - html, css, css3

Snažím sa robiť div vertikálne v centre rodičov div.V rovnakej dobe ja nechcem, aby dieťa div nereaguje.

Tu je html kód

<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>

Vytvoril som tu demo - http://jsfiddle.net/squidraj/4eewp8x0/7/

Ako vidíte, polopriehľadná krabica s prekryvom je vždy v spodnej časti a v prehliadači zmena veľkosti boxu tiež zmena veľkosti a výsledkom je prekrytie, ktoré spôsobuje problém s textom.

Akákoľvek pomoc / návrh je veľmi cenený. Vopred ďakujem.

odpovede:

Po prvé, existuje dobre známy trik na to, môžete si ho prečítať ďalej https://css-tricks.com/centering-in-the-unknown/

To vám dá toto: http://jsfiddle.net/4eewp8x0/8/

Keďže však máme stále silnejšie nástroje CSS3, rád by som uviedol ďalšie triky.

1. Transformácia CSS

Podstatou tohto triku je to, že absolútne postavíme dieťa na (50%,50%), a potom preložte (-50%,-50%)

Budete mať toto: http://jsfiddle.net/4eewp8x0/9/

2. Rozloženie Flexu

Nakoniec, ľudia, ktorí sú naplnení zúrivosťou k ťažkostiam pri zarovnávaní prvkov, prichádzajú s flexibilným usporiadaním.

Môžete si prečítať o rozložení flex tu:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Budete mať toto: http://jsfiddle.net/4eewp8x0/11/