Jak wyśrodkować zdjęcie w divie w pionie?

Dla specjalistów Webmastering
#1

Jak to zrobić by zdjęcie niezależnie od tego czy ma wysokość200px, czy 500px zawsze było wyśrodkowane w pionie w divie o wysokości 1000px?

Mam stronę z galerią zdjęć. Po kliknięciu w zdjęcie otwiera się ono i jest umieszczone w divie. Chciałbym by każde ze zdjęć było wyśrodkowane w divie w pionie. Mój problem polega na tym, że ze stylu CSS będzie korzystać kilka zdjęć, a każde jest w innym formacie. Umiem tylko wyśrodkować zdjęcie dla jednego formatu, a jeśli kliknę na inne, to zdjęcie jest albo za wysoko, albo za nisko.

*Wiem, że temat znajdę w Google, ale żaden nie rozwiązał mojego problemu.

#3

Spróbuj tak (wyśrodkowanie CSS level 3):
https://jsfiddle.net/do16n1nz/1/

W ten sposób poprawnie się wyśrodkuje nawet jak zdjęcie będzie większe od “div’a”
(żeby nie było - jest według specyfikacji: https://www.w3.org/Style/Examples/007/center.en.html#vertical)

#4

Dzięki wielkie. Działa tak jak chciałem. Ale jest jeden problem.

Div, w którym znajduje się zdjęcie ma szerokość i wysokość ustawioną na 100%. Ale div nie rozciąga się od brzegu do brzegu. U dołu i z boku jest pusta przestrzeń, której nie mogę usunąć dając margin:0px; i padding:0px;. Co tam może być?

#5

Albo można zrobić bez użycia CSS 3 za pomocą:

 display: table-cell;
 vertical-align: middle;
 text-align: center;

Przykład: https://jsfiddle.net/g2r1bq1g/ (@Domker sorki że użyłem kodu z Twojego przykładu, ale nadawał się a ja jestem istotą leniwą :wink: )

PS. Przykład z szerokością 100%, a nie stałą wartością: https://jsfiddle.net/g2r1bq1g/3/

#6

Już wiem. To pasek nawigacji powoduje ten margines obok diva. On ma szerokość ustawioną na 1024px, a div na 100%. Czy można dodawać elementy z szerokością w px i w procentach na jednej stronie? Czy coś innego może powodować ten problem?

#7

Tak można, ale trzeba to robić z głową bo w pewnych sytuacjach strona może się rozjeżdżać. Najlepiej jakbyś dał link do strony albo działający przykład bo nie wiem co to za jeden ten “On”.