这是一个使用纯CSS的简单解决方案。

<div class="myDiv" id="div1"></div>
<div class="myDiv" id="div2"></div>

html, body {
    margin: 0;
}

.myDiv {
    border: 2px solid black;
    height: 50vh;
    box-sizing: border-box;
    /* min-height: 200px; */
    resize: vertical;
    overflow: auto;
}

#div1 {
    background-color: cornflowerblue;
}

#div2 {
    background-color: crimson;
}

问题1：

要使它们之间的边界居中，您可以使用vh单位将每个窗口的高度设置为视口的一半。vh是一个相对CSS单位，例如100 vh等于浏览器视口的高度。
但是设置height: 50vh会将div内容的高度设置为50vh，而不是整个div，因此高度将为50vh + padding if any + border thickness，为了避免这种情况，请使用box-sizing: border-box。这使得整个高度（包括任何填充和边框厚度）为50vh。
更多关于box-sizing属性：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
你也可以添加min-height，如果你想避免div太小。

问题二：

要为用户添加调整div大小的功能，请添加以下内容：

resize: vertical;
overflow: auto;

更多关于resize属性：https://developer.mozilla.org/en-US/docs/Web/CSS/resize
我不确定这是否是你在第二个问题中所寻找的。