容器内浮动元素（导航控件）的垂直居中

Question

我读过How can I center two floated elements within a container? 和朋友们；前者是指水平居中，朋友是非浮动孩子AFAICT。为什么我使用花车？好吧，请继续阅读...

这是我想要的布局：

+-------+-------------------+-------+
|       | ##### ##### ##### |       |
| [ < ] | ##### ##### ##### | [ > ] |
|       | ##### ##### ##### |       |
+-------+-------------------+-------+

是导航箭头； # 是在流畅的轮播中动态加载的图像缩略图。图像的宽度和高度都相同，但轮播可以配置为显示三个以上的此类图像。此外，整个事情当然需要响应:)

我的问题是我无法将包含外部容器中导航元素的元素垂直居中。浮动的各种组合：左/无，显示：弹性框，溢出：自动/隐藏，边距：自动等已经尝试过，我无能为力。

没有浮动，导航元素和轮播会堆叠起来（如预期的那样）：

+-------+-------------------+-------+
| [ < ]                             | 
| ##### ##### #####                 |
| ##### ##### #####                 |
| ##### ##### #####                 |
| [ > ]                             |
+-------+-------------------+-------+

使用 float: left，导航元素拒绝垂直居中 - 看起来这些元素没有接收到容器的完整高度（导航元素是包含跨度的 div）：

+-------+-------------------+-------+
| [ < ] | ##### ##### ##### | [ > ] |
|       | ##### ##### ##### |       |
|       | ##### ##### ##### |       |
+-------+-------------------+-------+

这是基本（非工作）代码。为了便于测试，我已经取消了轮播。在下面的代码中，我使用 javascript 来模拟加载（远程）图像。

$('document').ready(function() {
  setTimeout(function() {
    $('img').css({
      width: '150px',
      height: '110px'
    });
  }, 1500);
});

.outer {
  position: relative;
  border: 1px solid black;
}

.nav {
  position: relative;
  border: 1px solid green;
  width: 4%;
  height: 100%;
  float: left;
  display: flex-box;
  align-content: center;
}

.carousel {
  position: relative;
  border: 1px solid red;
  width: 90%;
}

img {
  background: lightblue;
  display: block;
}

.image {
  position: relative;
  float: left;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  height: auto;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="left nav">
    <span class="left nav-arrow">&lt;</span>
  </div>
  <div class="carousel">
    <div class="image"> <img class="img1"> </div>
    <div class="image"> <img class="img2"> </div>
    <div class="image"> <img class="img3"> </div>
  </div>
  <div class="right nav">
    <span class="right nav-arrow">&gt;</span>
  </div>
</div>

我不反对 JS 解决方案，但如果可能的话，我更喜欢纯 CSS 解决方案。另外，我白天不是 CSS 开发人员，所以这里可能有一些 ahem 货物狂热的 CSS 规则。

Answer 1

只需使用 Flexbox...垂直居中使用align-items: center，水平居中使用justify-content: center

$('document').ready(function() {
  setTimeout(function() {
    $('img').css({
      width: '150px',
      height: '110px'
    });
  }, 1500);
});

.outer {
  position: relative;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

.nav {
  position: relative;
  border: 1px solid green;
  width: 5%;
  height: 100%;
  text-align: center;
}

.carousel {
  position: relative;
  border: 1px solid red;
  width: 90%;
  display: flex;
  justify-content: center;
}

img {
  background: lightblue;
  display: block;
  max-width: 100%;
}

.image {
  position: relative;
  padding: 6px 12px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="left nav">
    <span class="left nav-arrow">&lt;</span>
  </div>
  <div class="carousel">
    <div class="image"> <img class="img1"> </div>
    <div class="image"> <img class="img2"> </div>
    <div class="image"> <img class="img3"> </div>
  </div>
  <div class="right nav">
    <span class="right nav-arrow">&gt;</span>
  </div>
</div>

Answer 2

您还必须将display: flex 设置为您的外部元素。 我更新了您的 fiddle 并简化了 CSS。

$('document').ready(function() {
  setTimeout(function() {
    $('img').css({
      width: '150px',
      height: '110px'
    });
  }, 1500);
});

.outer {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav {
  border: 1px solid green;
  margin: 0 5px;
}

.carousel {
  border: 1px solid red;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

img {
  background: lightblue;
}

.image {
  padding: 6px 12px;
  border: 1px solid black;
}

.nav-arrow {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">

  <div class="left nav">
    <span class="left nav-arrow">&lt;</span>
  </div>

  <div class="carousel">

    <div class="image"> <img class="img1"> </div>
    <div class="image"> <img class="img2"> </div>
    <div class="image"> <img class="img3"> </div>

  </div>

  <div class="right nav">
    <span class="right nav-arrow">&gt;</span>
  </div>

</div>

我在答案中添加了 sn-p。