Question

我有一个容器div' full-h '，其最小高度为100vh。

此外，我还有一个高度未知的“ 内容” div。

内部内容div中，我有 2个项目，高度未知。

我试图将这两项垂直居中放置在桌面上，最小高度为100vh。如果内容的高度高于移动设备上的屏幕高度，我希望根据内容自动确定高度。所以我用最小高度代替了高度。

由于数小时的互联网研究，我尝试了许多不同的方法。我尝试使用flexbox和表内容。但是无论我做什么都行不通。我认为问题可能与我的计算机有关，因此我重新启动了浏览器和计算机。我已经在JSFiddle上运行了我的代码。但是结果是一样的。非常感谢大家。

这是JSFiddle：https://jsfiddle.net/ybrown/q128hyng/4/

代码如下：

HTML

body {
  margin: 0;
  padding: 0;
}

.full-h {
  min-height: 100vh;
  background-color: #666;
}

.v-center {
  display: table;
}

.content {
  display: table-cell;
  vertical-align: middle;
  background-color: #999;
}

<div class="full-h">
  <div class="v-center">
    <div class="content">
      <h1>Hello World!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, quidem. Expedita, aperiam, molestiae sequi necessitatibus, natus dolorum enim laborum incidunt praesentium itaque a. Nobis sint nisi accusamus omnis, est perspiciatis.</p>
    </div>
  </div>
</div>

垂直对齐：中间在CSS中不起作用

0 个答案: