css - 如何以正确的方式在 y 轴上对齐我的 div？CSS/弹性

我正在尝试构建一个登录页面，并有 3 个 SVG 图像，其中 2 个在顶部，1 个在右下角。它们都是绝对定位的，容器相对显示。

现在我基本上想要一个位于外部容器顶部 30/40% 的 div。解决这个问题的最佳方法是什么？

1）制作一个固定高度的div，但这不是响应式的，我将使用媒体查询。

所以它是关于图像上显示的蓝色容器，其中红色框没有高度，因为它们是抽象的。

此 div 应位于高度顶部的 30%。

什么方法最适合这个？

标签： cssflexboxtailwind-css

对于垂直对齐，您可以flex-flow: column;在容器上使用。然后设置flex-basis为弹性项目的百分比。因此，您可以控制容器内子元素的相对高度。

参见：jsfiddle