/ / Problem mit nicht reagierenden vertikal zentrierten div - html, css, css3

Problem mit nicht reagierenden vertikal zentrierten div - html, css, css3

Ich versuche, ein div vertikal zentriert in einem Elternteil div zu machen. Zur gleichen Zeit möchte ich nicht, dass das Kind div nicht reagiert.

Hier ist der HTML-Code

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

Ich habe hier eine Demo erstellt - http://jsfiddle.net/squidraj/4eewp8x0/7/

Wie Sie sehen können, bleibt die halbtransparente Box mit Overlay immer am unteren Rand und bei der Größenanpassung des Browsers ändert sich auch die Größe der Box und das Overlay-Feld verursacht daher ein Problem für den Text.

Jede Hilfe / Anregung wird sehr geschätzt. Danke im Voraus.

Antworten:

2 für die Antwort № 1

Zunächst einmal gibt es einen bekannten Trick, um dies zu tun, Sie können es lesen https://css-tricks.com/centering-in-the-unknown/

Dies wird dir folgendes geben: http://jsfiddle.net/4eewp8x0/8/

Da wir immer leistungsfähigere Werkzeuge von CSS3 haben, würde ich gerne noch ein paar Tricks vorstellen.

  1. CSS-Umwandlung

Die Essenz dieses Tricks besteht darin, dass wir das Kind absolut positionieren (50%,50%)und dann eine Übersetzung von (-50%,-50%)

Du wirst das haben: http://jsfiddle.net/4eewp8x0/9/

  1. Flex-Layout

Endlich, Menschen, die mit Wut auf die Schwierigkeiten der Ausrichtung Elemente gefüllt sind, kommen mit Flex-Layout.

Sie können über Flex-Layout hier lesen:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Du wirst das haben: http://jsfiddle.net/4eewp8x0/11/