Html 垂直对齐div不工作的方法

我正在安排这个布局。首先，我用一张桌子把它摆出来，在那里我可以把所有东西都放到我想去的地方。有点像一个四角的想法，每个盒子都像网格一样在中心接触。左上角的框被粘在它的元素顶部，但我可以使用

垂直对齐将其取下

然而，我意识到，如果我想要一个流畅的布局，并且能够“分解”布局，使每个块成为它自己的块元素，我就必须从
表
设计切换到
div
设计。在与它搏斗了几个小时之后，我设法将它人工处理成我需要的标准大分辨率屏幕（我还没有试着缩小它）。但是那个愚蠢的左上角的盒子仍然粘在它的元素的顶部，我不知道如何把它弄下来

我尝试将
div
放在一个位置：relative，然后将表
position:absolute
和
bottom:0px
，但都不起作用

我尝试了新的
显示：表格单元格；垂直对齐：底部
；这是我以前从未见过的东西，但没用

我试过
位置：相对；顶部：50%
；这不起作用（我知道这在技术上只能使它居中，但我只是想让它移动）

我记不起我还试过什么，但要想让一个div垂直对齐需要付出这么多努力，这真是有点疯狂，你不这么认为吗

这是我尝试做的一个例子。理论上，左上角块应该位于其div的底部，但它不是。这只是我尝试过的一个例子



左上块
右上街区
左下块
右下块
一些代码就好了。我真的不能用绝地思维技巧来移动你的左上角网格并将其捕捉到位。不过绝地思维技巧会很棒！（͡°͜ʖ͡°）sai抱歉，我的字符有限，我不知道如何像其他人那样添加代码框。基本上，当你在编辑问题的时候，在这个框的顶部有这样的菜单，有一个大的粗体B a倾斜的斜体I等等。这就是你需要的功能。填充呢？这听起来像是一个填充顶部填充底部的工作