如何自动将视<div>口底部居中？

Question

我正在创建一种基于纯文本的网站/实验，没有图像或其他任何东西，它只由一个包含多个<span>和<a>元素的<div>组成，这些元素在单击时使用JS打开，显示堆叠在<div>底部的文本。

当屏幕上覆盖的文本太多，用户不断点击，从而显示出更多的文本时，问题就来了，这些不断堆叠在底部的新行就不会自动可见：用户必须开始滚动才能继续阅读。

有没有一种方法可以自动将<div>的底部放在屏幕中央，这样它就不需要滚动了？当文本填满整个屏幕时，你有没有想过更好的解决方法来避免手动滚动？

谢谢！

编辑：我添加了一段代码，以便更好地理解我所做的。

<div id="container">
<p class="fade-in">
<a data-opens="1" href="#">Hello</a>.<span data-openedby="1" class="fade-in"> How are <a data-opens="2" href="#">you</a>? </span><span class="fade-in" data-openedby="2"><a data-opens="3" href="#">Welcome</a> to my website.</span>
</p>
</div>

基本上，这段代码，但到目前为止，它已经有300个<a>和它们各自的<span>。

Answer 1

如果我正确理解你的问题，你不想更改<div>框，但使其自动滚动到内容的底部。

这可以通过使contentdiv成为反向flex容器的单个子级，并将滚动应用于容器来实现。这里有一个例子：

HTML

<div class="bottom-oriented">
<div id="content">
<div>Top</div>
</div>
</div>

CSS

.bottom-oriented {
max-height: 100px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
#content {
border: 1px solid;
}

用于演示行为的JS

var parent = document.getElementById("content"),
i = 0;
window.setInterval(function () {
var newEl = document.createElement("div");
i++;
newEl.textContent = "Text " + i;
parent.append(newEl);
}, 3000);

Answer 2

这样的东西怎么样：

CSS:

button {
position: relative;
z-index: 10;
}
div {
position: fixed;
bottom: 50%;
}

HTML:

<button>Click me!</button>
<div>
<span>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br><br>
</div>

jQuery:

var counter = 1; // to help distinguish new content
$('button').on('click', function(){
$('div').append('<span>' + counter + '. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br><br>');
});

JSFiddle。