How to vertical center the left right arrow from image in light gallery for all mobile devices

Question

As Lighgallery already provides the left and right arrow to be the center of the device for every screen but I need the left and right arrow to be vertically center from the image box as shown in fig

Is there any solution to be put left and right arrows always vertically center of the image for different mobile devices. As I pull the site in mobile. It's extension gone hide. And due to it's height left and right arrow disbalance from it's position due to absolute. As relative is mention in full screen and only. link is there just I push the image on top margin-top: -70px to looks top on the box but now left and right arrow can't be center to the image

https://sachinchoolur.github.io/lightGallery/demos/index.html

.lg-actions .lg-next, .lg-actions .lg-prev {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  color: #999;
  cursor: pointer;
  display: block;
  font-size: 22px;
  margin-top: -10px;
  padding: 8px 10px 9px;
  position: absolute;
  top: 50%;
  z-index: 1080;
  border: none;
  outline: none;
}

.lg-outer .lg-img-wrap {
        margin-top: -70px !important;
}

Answer 1

You usually vertically allign items with margin-top:50% + transform:translateY(-50%) or with top:50% + transform:translateY(-50%) .
The 50% of top/margin-top refers to the parent element's height (the red box in your case), the 50% of the translate refers to the height of your translated elements (the arrows).
The code should look like this:

 .lg-actions.lg-next, .lg-actions.lg-prev { background-color: rgba(0, 0, 0, 0.45); border-radius: 2px; color: #999; cursor: pointer; display: block; font-size: 22px; margin-top: -10px; padding: 8px 10px 9px; position: absolute; z-index: 1080; border: none; outline: none; /* Method 1 */ top: 50%; -webikit-transform: translateY(-50%); /* Safari */ transform: translateY(-50%); /* Method 2 */ margin-top: 50%; -webikit-transform: translateY(-50%); /* Safari */ transform: translateY(-50%); }.lg-img-wrap { /* Give it a height value if you can */ }.lg-outer.lg-img-wrap { margin-top: -70px;important; }

Plus i would suggest to avoid using absolute mesures such as "px" because, as this case shows, they don't scale very well. To avoid changing your code too much you could target mobile devices with @media screen and (width: ...px) and setting the margins to the above provided relative values.
Hope this helped !