在没有 Flexbox 或网格的情况下挑战 CSS 垂直居中：流体尺寸和动态内容 [重复]

Question

所以我的学校作业有疯狂的要求，但我对其中一个有疑问。

我面临 CSS 布局挑战，需要在另一个 div 中实现一个 div 元素的垂直居中，但有几个限制。

首先，父级和子级 div 都具有基于视口大小的可变宽度和高度。而且，子 div 包含长度可能不同的动态内容，这使得传统的居中技术变得不可靠。

此外，该解决方案的实施必须不依赖 Flexbox 或网格等现代 CSS 功能，因为目标环境对高级 CSS 属性的支持有限。谁能设计一个解决方案，确保子 div 在其父 div 内完美垂直居中，适应流体尺寸和动态内容，同时遵守 CSS 标准？

请帮忙并提前谢谢你:)

Answer 1

使用

flexbox

实现给定布局的方法是正确的。只需为父 div 添加

justify-content

和

align-items

参数即可。 这是代码示例：

<div class="outer">
  <div class="in">
  </div>
</div>

CSS

.outer {
  display: flex;
  justify-content: center; 
  align-items: center; 
}

Answer 2

在 CSS 中实现垂直居中提供了多种方法

1.

  .parent {
    display: grid;
    place-items: center;
    height: 300px;
    border: 1px solid #000;
  }

  .child {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }

<div class="parent">
  <div class="child">Center me vertically!</div>
</div>

2.

  .parent {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    height: 300px; /* Just for demonstration */
    border: 1px solid #000; /* Just for demonstration */
  }

  .child {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }

<div class="parent">
  <div class="child">Center me vertically!</div>
</div>

如果这不起作用，请尝试使用相对和绝对等位置

例如

  .parent {
    position: relative;
    height: 300px;
  }

  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }

<div class="parent">
  <div class="child">Center me vertically!</div>
</div>

：