вертикально отцентрировать изображение переполнения

Question

Кажется, я не могу решить свою проблему с помощью решений, которые нашел в Интернете.Изображение просто не будет двигаться.

Я хочу расположить изображение по центру в моем div.Поэтому вместо показа сверху вниз он начинается где-то посередине.

HTML

<article class="banner">
    <button class="button">Schedule your FREE assesment</button>
    <img class="mySlides" src="images/img1.jpg" width="100%">
    <img class="mySlides" src="images/img2.jpg" width="100%">
    <img class="mySlides" src="images/img3.jpg" width="100%">
    <img class="mySlides" src="images/img4.jpg" width="100%">
</article>

CSS

.banner {
    position: relative;
    background-color: #212121;
    height: 180px;
    width: 100%;
    overflow: hidden;
    opacity: .80
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button {
    position: absolute;
    margin-left: -14%; /* Anyway to make this centered more eficiently? */
    margin-top: 5%;
    border: 0;
    background-color: #C60505;
    color: white;
    padding: 15px 25px;
    font: Arial-Heavy;
    font-size: 20px;
    cursor: pointer;
    border-radius: 8px;
    text-shadow: 1px 1px #000000;
}

Стоит отметить, что класс, прикрепленный к изображениям, связан с JS, который имеет эффект слайд-шоу.

Answer 1

.button должен иметь эти значения для центрирования (по вертикали и горизонтали):

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

Это перемещает верхний левый угол button в точную середину его родительского элемента (используя top и left 50%), а затем перемещает его назад на 50% влево и вверх от собственной ширины и высоты (используя параметр transorm), поэтому центрируя его внутри родительского элемента.

Если вы действительнотребуется только вертикальное центрирование, используйте только top: 50%; и transform: translateY(50%).