HTML5/CSS3 如何在任意大小的 div 中垂直对齐任意大小的 div
HTML5/CSS3 how to vertically align an arbitrarily-sized div within an arbitrarily-sized div
我知道垂直对齐是一个古老的问题，我不想打死马。但我觉得我已经花了几个小时阅读所有的说明和技巧，以及现在应该通过 flex box 模型使用 HTML5/CSS3 的方法，但我已经尝试了所有这些，但仍然无法解决这个特殊情况：
<div style="border: 1px solid black; width:50%; height:50%; margin:auto;">
请注意，当您调整浏览器大小时 window，div 始终是浏览器 window 高度和宽度的 50%，并且始终在浏览器中水平居中 window。我需要的是 get/keep 它也垂直居中。绝对有什么办法，鉴于 div 本身和封闭的 div 都是非固定（和不可预测的）高度 ?
请注意这里的目标用法是将这个 div 放在另一个 div 里面，但是我这里的例子只是把它放在 body 里面为了最好的 illustrate/simplify/test 结果通过实时 window 调整大小给定封闭和内部 divs 的任意大小。
使用 flexbox，特别是 align-self 属性。由于您使用的是相对大小，因此其父元素将需要以某种方式具有一定的高度，例如通过 min-height:100vh，否则它将没有其内容可以对齐的高度。默认情况下，正文元素仅与其内容一样高，而不是视口那么高。
我知道垂直对齐是一个古老的问题，我不想打死马。但我觉得我已经花了几个小时阅读所有的说明和技巧，以及现在应该通过 flex box 模型使用 HTML5/CSS3 的方法，但我已经尝试了所有这些，但仍然无法解决这个特殊情况：
<div style="border: 1px solid black; width:50%; height:50%; margin:auto;">
请注意，当您调整浏览器大小时 window，div 始终是浏览器 window 高度和宽度的 50%，并且始终在浏览器中水平居中 window。我需要的是 get/keep 它也垂直居中。绝对有什么办法，鉴于 div 本身和封闭的 div 都是非固定（和不可预测的）高度 ?
请注意这里的目标用法是将这个 div 放在另一个 div 里面，但是我这里的例子只是把它放在 body 里面为了最好的 illustrate/simplify/test 结果通过实时 window 调整大小给定封闭和内部 divs 的任意大小。
使用 flexbox，特别是 align-self 属性。由于您使用的是相对大小，因此其父元素将需要以某种方式具有一定的高度，例如通过 min-height:100vh，否则它将没有其内容可以对齐的高度。默认情况下，正文元素仅与其内容一样高，而不是视口那么高。