슬라이더 내부의 중간 동적 이미지를 절대 위치로 정렬

Question

다음 CSS가 있습니다. 중심에 이미지를 정렬하고 싶습니다. 하지만 작동하지 않습니까?

element.style { 
} 
.bx-wrapper .bxslider li img { 
    max-width: 100% !important; 
    height: auto !important; 
} 
.bxslider img { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
} 
.bx-wrapper img { 
    max-width: 100%; 
} 
img { 
    border: 0; 
} 
img { 
    vertical-align: middle; 
} 
img { 
    border: 0; 
} 

HTML :

중간에 수직 정렬

<ul class="bxslider" style="width: 860%; transform: translate3d(545.5px, 0px, 0px); vertical-align: middle; display: block; height: 465px; transition-duration: 0s;"> 
    <li class="bxslider_imge bx-clone" style="float: left; list-style: none outside none; position: relative; width: 760px;"> 
     <img alt="buk" src="/uploads/thumbs/52.jpg" data-image-original-path="/uploads/thumbs/52.jpg" title="Buk" data-image-thumb-path="/uploads/thumbs/52.jpg" data-image-id="17610" data-thumb-loaded="0"> 
    </li> 
    <li class="bxslider_imge" style="float: left; list-style: none outside none; position: relative; width: 760px;"> 
     <img alt="itc" src="/uploads/thumbs/e7.jpg" data-image-original-path="/uploads/thumbs/e7.jpg" title="ITC" data-image-thumb-path="/uploads/thumbs/e7.jpg" data-image-id="17607" data-thumb-loaded="1"> 
    </li> 
</ul> 

Answer 1

, 내가 사용하려면 : 당신은 모든 공급 업체 접두사 필요 물론

.elem { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

(-webkit-변환, -moz-transform).
이것은 모든 전공 브라우저 (IE9 이상)를 사용하는 compatible입니다.