Wyśrodkowanie diva z position:fixed

Question

Witam, uczę się dopiero sztuki webdevelopingu. Jako zadanie postawiłem sobie stworzyć prostą galerię ze zdjęciami. Wygląda to tak:

Po kliknięciu na ktorąś miniaturkę otwiera się jej pełny rozmiar. I tu pojawia się mój problem: nie potrafię wyśrodkować go w pionie. W poziomie jakoś daje radę, ale pionowo nie wychodzi. Nie byłby to problem, gdyby była to strona statyczna, ale postanowiłem, że będzie to strona responsywna. Zależy mi też na tym, aby miały one position:fixed, żeby zawsze byly na samym środku ekranu. Umieściłem je w divie, który będzie zajmował cały obszar strony z tłem pół-przezroczystym. Przekopałem internet i znalazłem parę rozwiązań, ale każdemu czegoś brakuje. Zna ktoś jakieś rozwiązanie mojego problemu?
Kod (HTML):

<div id="content">
        
            <div id="page-name"><i class="icon-camera-1"></i>Galeria </div>
            
                <div id="galeria">
    
                    <div class="img img-1"><img src="img/galeria/sm-1.jpg" /></div>
                    <div class="img img-2"><img src="img/galeria/sm-2.jpg" /></div>
                    <div class="img img-3"><img src="img/galeria/sm-3.jpg" /></div>
                    <div class="img img-4"><img src="img/galeria/sm-4.jpg" /></div>
                    <div class="img img-5"><img src="img/galeria/sm-5.jpg" /></div>
                    <div class="img img-6"><img src="img/galeria/sm-6.jpg" /></div>
                    <div class="img img-7"><img src="img/galeria/sm-7.jpg" /></div>
                    <div class="img img-8"><img src="img/galeria/sm-8.jpg" /></div>
                
                </div>
            
        </div>
        
            <div id="big-img">
                    
                    <div id="zamknij-galerie">ZAMKNIJ</div>
                    
                    <div class="img-lg" id="img-1"><img src="img/galeria/lg-1.jpg" class="lg-img"/></div>
                    <div class="img-lg" id="img-2"><img src="img/galeria/lg-2.jpg" class="lg-img"/></div>
                    <div class="img-lg" id="img-3"><img src="img/galeria/lg-3.jpg" class="lg-img"/></div>
                    <div class="img-lg" id="img-4"><img src="img/galeria/lg-4.jpg" class="lg-img"/></div>
                    <div class="img-lg" id="img-5"><img src="img/galeria/lg-5.jpg" class="lg-img"/></div>
                    <div class="img-lg" id="img-6"><img src="img/galeria/lg-6.jpg" class="lg-img"/></div>
                    <div class="img-lg" id="img-7"><img src="img/galeria/lg-7.jpg" class="lg-img"/></div>
                    <div class="img-lg" id="img-8"><img src="img/galeria/lg-8.jpg" class="lg-img"/></div>
                    
            </div>

</div>

(CSS):

#big-img
    {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        top: 0;
        z-index: 10;
        display: none;
    }

    #zamknij-galerie
    {
        position: fixed;
        z-index: 11;
        color: white;
        right: 19%;
        top: 10%;
        display: none;
        cursor: pointer;
    }

    .img-lg
    {
        
    }

    .lg-img
    {
        width: 70%;
        height: 70%;
    }

Pozdrawiam

Answer 1

height nie podaje się z % tylko vh bo inaczej nie zadziała. 

1vh = 1% 

Comments

No dobrze, dzieki. Tylko jak to wypozycjonowac na srodek nie majac statycznej szerokosci ani wysokosci? Ustawilem sobie, że dla przeglądarki > 1008px content bedzie mial szerokosc 1000px, a obrazek 900px. Tylko co zrobic ponizej tych 1008px?

---

ustawić mniejszą :D

---

niestety dalej to rozwiazanie mnie nie satysfakcjonuje :P chce, zeby kazda przegladarka ponizej 1008px wyswietlala mi duze zdj powiedzmy w szerokosci 80%, wtedy nie jestem w stanie okreslic jaka szerokosc i wysokosc bedzie mial obrazek :P jedynie przychodzi mi na mysl bardzo duzo "media queries", ale to troche rozwiazanie okrężne
EDIT:
poradziłem sobie za pomoca tego sposobu (z tym ze zastapilem "relative" na "fixed":

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}