Responsive image centering. <li> is just the parent and can be any element. #css, #less, #center

style.less

.photo-fullscreen {
  position: fixed;
  z-index: 99;
  color: white;
  height: 100%;
  width: 100%;

    li {
      text-align: center;
    }

    li:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    img {
      display: inline-block;
      vertical-align: middle;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
}