我有这些div，我怎么把.Div1放在中间，.Div2放在底部呢?
.Div1 {
background: rgb(0, 0, 0);
text-align: center;
vertical-align: middle;
line-height: 90px;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(9, 9, 121, 1) 25%, rgba(0, 212, 255, 1) 100%);
}<div class="Div1" style="width: 100%; height: 100%; color: rgb(255, 255,
255); border-collapse: collapse; font-size: 30px; position: relative">
I-BS
<div class="Div2">
<p>
<FONT size=auto>
<STRONG>A B C D</STRONG>
</FONT>
</p>
</div>
</div>有多种方法可以做到这一点。
这个代码片段演示了几个CSS特性，使用CSS flex将Div1的内容集中对齐，并将Div2相对地定位在其父元素的底部。
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
.Div1 {
background: rgb(0, 0, 0);
text-align: center;
vertical-align: middle;
line-height: 90px;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(9, 9, 121, 1) 25%, rgba(0, 212, 255, 1) 100%);
/* ADDED */
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.Div2 {
position: absolute;
bottom: 0;
}
</style>
<head>
<body>
<div class="Div1" style="width: 100%; height: 100%; color: rgb(255, 255,
255); border-collapse: collapse; font-size: 30px; position: relative">
I-BS
<div class="Div2">
<p>
<FONT size=auto>
<STRONG>A B C D</STRONG>
</FONT>
</p>
</div>
</div>
</body>
</html>这个演示的注意事项:
body被用作包含元素，Div1可以从中取其维数。body已被赋予视口宽度和高度。
浏览器添加的默认边距已经从元素中删除，只是为了演示获得完整的视口/屏幕覆盖。
进一步指出:
你可能想让你的代码通过一个验证器来确保它是最新的。
例如，font标签在HTML5中是不赞成的-建议切换到CSS。
border-collapse属性在这里可能没有帮助，因为它指的是table元素。
这完全取决于你想要的字符间距在Div2，但它可能是使用CSSflex可以帮助这里，例如，如果你想ABCD沿底部均匀间隔。参见MDN