HTML5/CSS3 如何在任意大小的 div 中垂直对齐任意大小的 div答案

【问题标题】：HTML5/CSS3 how to vertically align an arbitrarily-sized div within an arbitrarily-sized divHTML5/CSS3 如何在任意大小的 div 中垂直对齐任意大小的 div
【发布时间】：2015-03-08 12:06:32
【问题描述】：

我知道垂直对齐是一个古老的问题，我不想打败死马。但我觉得我已经花了几个小时阅读所有的说明和技巧，以及现在应该通过 flex box 模型使用 HTML5/CSS3 的内容，但我已经尝试了所有这些，但仍然无法解决这个特殊情况：

<div style="border: 1px solid black; width:50%; height:50%; margin:auto;">

请注意，当您调整浏览器窗口的大小时，div 始终是浏览器窗口高度和宽度的 50%，并且始终在浏览器窗口中水平居中。我需要的是让它/保持垂直居中。鉴于 div 本身和封闭 div 的高度均不固定（且不可预测），绝对有什么办法？

请注意，此处的目标用法是将此 div 放在另一个 div 中，但是我的示例仅将其放在主体中，以便最好地说明/简化/测试给定任意大小的封闭和内部的结果通过实时窗口大小调整 div。

【问题讨论】：

标签： css alignment vertical-alignment flexbox

【解决方案1】：

使用弹性框，特别是 align-self 属性。由于您使用的是相对大小，因此它的父元素将需要以一种或另一种方式具有一定的高度，例如通过min-height:100vh，否则它将没有其内容可以对齐的高度。默认情况下，body 元素仅与其内容一样高，而不是与视口一样高。

【讨论】：

谢谢。但align-self: center; 似乎仅将其垂直居中，我不知道这是为什么——例如，它似乎与flex-direction 无关。使用 flexbox 水平居中最合适的方法是什么？例如，显然父级上的text-align 不再适用于弹性框。它适用于margin-left: auto; margin-right: auto;，但是我猜这不适合纯 flexbox？也就是说，align-self: center; 真的只是 margin-top: auto; margin-bottom: auto; 的同义词，并且水平没有 flex 等效项吗？
好吧，看起来像 justify-content: center; 在父级是水平居中的方式。但是，为什么没有justify-self 对应物，就像align-items 有一个align-self 对应物一样？实际上，看起来align-self: flex-start; 覆盖了父级中的justify...center 和align...center，将这样的子框放在左上角，将flex-end 放在右下角。如何在右上角或左下角获得它？还是低中心或右中心？ flexbox 真的完全牺牲了简单的 2d 对齐方式吗？
那些事情是可能的，但不是问题的范围。我建议使用一些交互式 flexbox 教程来遍历所有选项
啊，触摸。 :) 谢谢，会的。