/ / Problem z nie reagującym pionowo div - html, css, css3

Problem z nie reagującym pionowo div - html, css, css3

Próbuję zrobić div pionowo w środku div jednostki. W tym samym czasie nie chcę div dziecko nie reaguje.

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

Stworzyłem tutaj demo - http://jsfiddle.net/squidraj/4eewp8x0/7/

Jak widać półprzezroczyste pudełko z nakładką zawsze pozostaje na dole, a przy zmianie rozmiaru okna zmienia się również rozmiar tego kwadratu, w wyniku czego pole nakładki powoduje problem z tekstem.

Każda pomoc / sugestia jest bardzo ceniona. Z góry dziękuję.

Odpowiedzi:

2 dla odpowiedzi № 1

Przede wszystkim jest dobrze znana sztuczka, możesz to przeczytać https://css-tricks.com/centering-in-the-unknown/

Da ci to: http://jsfiddle.net/4eewp8x0/8/

Ponieważ jednak dysponujemy coraz bardziej zaawansowanymi narzędziami CSS3, chciałbym przedstawić jeszcze kilka sztuczek.

  1. Przekształcenie CSS

Istotą tej sztuczki jest to, że absolutnie pozycjonujemy dziecko (50%,50%), a następnie przetłumaczyć (-50%,-50%)

Otrzymasz to: http://jsfiddle.net/4eewp8x0/9/

  1. Flex Layout

W końcu ludzie, którzy są wypełnieni furią w kierunku trudności wyrównania elementów wymyślić flex układ.

Możesz przeczytać o układzie flex tutaj:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Otrzymasz to: http://jsfiddle.net/4eewp8x0/11/