由于 .item 元素是相对定位的，因此您只需定位 img 元素。将 .item 元素设置为固定高度，将有助于垂直和水平对齐内部的图像。

Since the .item elements are relative positioned you could just position the img elements absolutely. Giving the .item elements a fixed height, will help to vertically and horizontally align the images inside.

I'确保有很多不同的方法可以做到这一点，这是一个示例。希望能帮助到你。

I'm sure there are lots of different ways to do this, here is one example. Hope it helps.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  background-color: black;
}

.carousel-inner > .item {
  height: 100vh;
}

.carousel-inner > .item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 800px;
  width: auto;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- inner -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/1200x600/2c3e50/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x1200/d35400/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x600/c0392b/000" alt="">
      </div>
    </div>

    <!-- controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    
  </div>

</div>