Question

关于CSS的一个非常常见的问题是如何垂直居中元素。 CSS3能够做到这么多特效，为什么它们不包括CSS3中的垂直中心功能？

我不相信这是一个很难添加的功能，即使初学者开发人员也可以使用javascript来设置功能。对于不同的情况，如此多的黑客攻击很明显，仅使用CSS就可以将内容垂直放置。那么也许还有其他原因导致他们决定不将其作为标准财产？

Answer 1

这是因为如何使用CSS执行布局 - CSS主要在x轴上排列项目，例如100％宽度如何按预期工作但不是100％高度。这可能是由于宽度取决于高度而可能发生的“计算/逻辑循环”，反之亦然，因此在计算时一个轴必须始终优先。

@BoltClock的额外信息：

x轴事物与文本中的自然文本流有关文献。请记住，Web开始时是一系列页面，所以 HTML和CSS最初是围绕这个基本前提构建的 - 它已经发展成为一个应用程序平台，但遗产是还在那儿。 Flexbox是垂直居中盒子的CSS3方式 - 唯一的问题是跨浏览器支持，但问题是关于无论如何，CSS3是可以预期的。

类似地，在口述对齐方面，水平对齐很容易，因为元素的宽度通常是隐式或明确说明的，就像块元素自动具有100％的隐式宽度一样，除非另有说明，允许容易计算沿水平轴的中心位置。

然而，这对于垂直对齐的情况不起作用，其中垂直对齐通常取决于内容的数量，长度和大小。在明确说明垂直高度的情况下，这实际上可以很容易地完成：

使用 CSS flexbox 方法
- 良好：符合标准且非常简单，感兴趣元素的维度不必修复
- 糟糕：缺乏广泛的跨浏览器支持，但appears very promising today

body {
  margin: 0;
  padding: 0;
}
.box {
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.box > .content {
  background-color: #333;
  color: #eee;
  padding: 1em 2em;
}

<div class="box">
  <div class="content">I am centered</div>
</div>

使用绝对定位和CSS转换
- 好处：广泛的跨浏览器支持，感兴趣元素的维度无需修复
- 坏：由于子像素转换而导致的模糊文本渲染（偶尔）

body {
  margin: 0;
  padding: 0;
}
.box {
  background-color: #eee;
  position: relatve;
  width: 100%;
  height: 100vh;
}
.box > .content {
  background-color: #333;
  color: #eee;
  padding: 1em 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="box">
  <div class="content">I am centered</div>
</div>

使用绝对定位和负边距
- 好处：非常直截了当
- 坏的：感兴趣的元素的维度必须是固定的

body {
  margin: 0;
  padding: 0;
}
.box {
  background-color: #eee;
  position: relative;
  width: 100%;
  height: 100vh;
}
.box > .content {
  background-color: #333;
  color: #eee;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

<div class="box">
  <div class="content">I am centered</div>
</div>

为什么CSS3不支持垂直中心（直接）？

1 个答案: