html - 如何在屏幕中间设置轮播？

Question

我在 carousel.css 文件 (bootstrap) 中有这个，我将图像的宽度设置为 900px，但我想让这个图像位于屏幕中间，怎么办？ (我试图编辑 left 变量，但什么也没发生，我希望它不被修复，类似于 <center></center> )

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 500px;
}

index.html:

<div id="myCarousel" class="carousel slide" data-ride="carousel" >
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:blabla" alt="First slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>aaa</h1>
                    <p>xxxx</p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

Answer 1

如果您只想水平居中，您可以执行 margin: 0 auto; 并摆脱绝对定位。如果你想垂直和水平居中，你可以这样做

.carousel-inner{
position: relative;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 900px;
  height: 500px;
}