垂直居中对齐高度未知的 div

Question

我正在尝试解决涉及浮动 div 的vertical-align 问题。所有高度都是未知的 - 因为它们仅由内部文本行隐式形成。

这是代码：https://jsfiddle.net/zjzyryae/

#test {
  background: yellow;
  display: inline-block;
}
#block1 {
  float: left;
  display: inline-block;
  background-color: grey;
}
#block2 {
  background-color: green;
  float: left;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

我需要将“block2”div 垂直居中——当然只有 CSS（没有 JavaScript）。

看到“block1” div 隐式设置了父“测试”块高度 - 这与描述的类似情况（其中此高度以像素为单位显式设置）产生了主要区别。

也许这个问题在某个地方得到了解决，但我没有找到完全相同的情况。我考虑的类似例子是不同的。

这个Center vertically a unknown height text in a unknown height div 实际上包括硬编码的高度设置——这与我的情况截然不同。

那个How to vertically middle-align floating elements of unknown heights? 也是不同的情况，不适合我的情况 - 因为父高度等于浮动 div 的高度（这比我的情况容易得多）。

我尝试使用不同的 display:table 设置 - 但仍然没有运气。

Answer 1

我建议使用 flexbox，与 display: inline-flex 完美搭配，因此它具有“缩小以适应”功能，就像其他内联级别元素一样。而align-items: center 使所有的 flex 项目都对齐到中间。

#test {
  background: yellow;
  display: inline-flex;
  align-items: center;
}
#block1 {
  background-color: grey;
}
#block2 {
  background-color: green;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

如果确实需要支持旧版浏览器，仍然可以使用内联块（无浮动），关键是设置vertical-align: middle，如果需要，去掉unwanted white space。

#test {
  font-size: 0; /*remove white space*/
  background: yellow;
  display: inline-block;
}
#block1,
#block2 {
  font-size: 16px; /*reset font size*/
  display: inline-block;
  vertical-align: middle;
}
#block1 {
  background-color: grey;
}
#block2 {
  background-color: green;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

或者使用 CSS 表格，再次设置 vertical-align: middle，但它的工作方式与内联块不同，它垂直居中内容或元素内部而不是元素本身或兄弟元素。我为背景颜色添加了<span> 标签。

#test {
  background: yellow;
  display: inline-table;
  vertical-align: middle;
}
#block1,
#block2 {
  display: table-cell;
  vertical-align: middle;
}
#block1 {
  background-color: grey;
}
/* #block2 {
  background-color: green;
} */

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    <span style="background:green;">sample</span>
  </div>
</div>

Answer 2

如果你不想使用flex，不要使用float，而是单独使用inline-block和vertical-align：

    #test {
      background: yellow;
      display: inline-block;
    }
    
    #block1 {
      display: inline-block;
      background-color: grey;
      vertical-align:middle;
    }
    
    #block2 {
      display: inline-block;
      background-color: green;
      vertical-align:middle;
    }

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div><!--
  --><div id="block2">
    sample
  </div>
</div>

https://jsfiddle.net/zjzyryae/1/

Answer 3

你可以使用 flexbox 来实现它

#test {
        background: yellow;
        display: flex;
        align-items: center;
    }

Answer 4

你为什么不对它们都使用 display flex 呢？这是一个新技巧，值得一试。 从一开始就使用 flex 并更改 css 代码的类型。

这就是我能给你的全部了。

    div#test {
        background: yellow;
        display: flex;
      flex-direction:row;
    }

div#block1, div#block2{
display:flex;
flex-direction:column;}
    div#block1 {
        background-color: grey;
    }

    div#block2 {
        background-color: yellow;
      align-items:center;
      justify-content:center
    }
    div#inside-block2{
        background-color:green;
    }

<div id="test">

    <div id="block1">
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>  
    </div>

    <div id="block2">
      <div id="inside-block2">
        sample
      </div>
    </div>

</div>

所以我所做的是，使用子 block1 和 block2 制作了一个名为 test 的包装，并且 block2 id 有一个子代，您可以将其放置或替换到任何您想要的位置。你可以在here了解更多关于 flex 的信息

我的一些代码提示。使用 div#id 在 css 中调用 id 名称，我相信如果您只使用 #id 调用它们，某些浏览器可能会有点跳跃。

希望对你有所帮助。