我正在制作一个快速响应的网站，需要在一个正在使用css3动画的div内设置一个图像中心

我正在制作一个响应性网站，作为学校项目的一部分。我正在尝试使用CSS3动画将画廊从一幅画过渡到下一幅画。过渡正在工作，但就我的一生而言，我无法使图像在幻灯片框架中居中

我试图看看这里是否有一个解决办法，但找不到一个我可以开始工作的办法

谢谢你的帮助

HTML

问题在于图像上的

位置：绝对

，只需将其取下并添加

display:block；保证金：自动你就可以走了

<div id="image-slider">
        <div id="navigation">
            <a href="#slide1">1</a>
            <a href="#slide2">2</a>
            <a href="#slide3">3</a>
            <a href="#slide4">4</a>
            <a href="#slide5">5</a>
            <a href="#slide6">6</a>
            <a href="#slide7">7</a>
        </div>
        <div id="slide-frame">
            <img class="center" src="images/explorations/Bound.jpg" alt="" />
            <div id="slides">
                <img id="slide1" class="center" src="images/explorations/Bound.jpg" alt="" />
                <img id="slide2" class="center" src="images/explorations/Cleave.jpg" alt="" />
                <img id="slide3" class="center" src="images/explorations/forLoveofGodandCountry.jpg" alt="" />
                <img id="slide4" class="center" src="images/explorations/unknownCorrosive.jpg" alt="" />
                <img id="slide5" class="center" src="images/explorations/Untitled1.jpg" alt="" />
                <img id="slide6" class="center" src="images/explorations/Untitled3.jpg" alt="" />
                <img id="slide7" class="center" src="images/explorations/Untitled4.jpg" alt="" />
            </div>
        </div>
    </div>

#image-slider {
margin: 10px auto;
width: 100%;
}

#slide-frame {
height: 600px;
overflow: hidden;
margin: auto;
}

#slides {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
text-align: center;
}

.center{
margin: 0px auto;
display: block;
}

#slides img {
position: absolute;
top: 0;
margin: auto;
}

#navigation {
margin: 5px 0 0 0;
text-align: center;
z-index: 10px;
font-size: 2rem;
}

#navigation a {
text-decoration: none;
color: #373737;
display: inline-block;
}

#navigation a:hover {
color: #B6A084;
}

#slides img {
z-index: 1;
opacity: 0;

/* animation */
transition: all linear 400ms;
-o-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-webkit-transition: all linear 400ms;
}

#slides img:target {
left: 0;
z-index: 5;
opacity: 1;
}