如何自動使底部居中<div>在視口上？</div><div id="text_translate"><p> 我正在創建一種僅基於純文本、沒有圖像或其他任何內容的網站/實驗，它僅包含一個&lt;div&gt;包含幾個&lt;span&gt;和&lt;a&gt;元素，這些元素在使用 JS 點擊時打開，顯示堆疊的文本在&lt;div&gt;的底部。</p><p> 當屏幕上覆蓋的文本過多時，問題就出現了，並且用戶不斷點擊——因此，顯示更多文本——這些新行一直堆疊在底部，不會自動可見：用戶必須開始滾動到繼續閱讀。</p><p> 有沒有辦法可以自動將&lt;div&gt;的底部放在屏幕<em>的</em>中心，所以它不需要滾動？ 當文本填滿整個屏幕時，您是否有更好的解決方法來避免手動滾動？</p><p> 謝謝！</p><p> 編輯：我添加了一段代碼，以便更好地理解我所做的。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div id="container"&gt; &lt;p class="fade-in"&gt; &lt;a data-opens="1" href="#"&gt;Hello&lt;/a&gt;.&lt;span data-openedby="1" class="fade-in"&gt; How are &lt;a data-opens="2" href="#"&gt;you&lt;/a&gt;? &lt;/span&gt;&lt;span class="fade-in" data-openedby="2"&gt;&lt;a data-opens="3" href="#"&gt;Welcome&lt;/a&gt; to my website.&lt;/span&gt; &lt;/p&gt; &lt;/div&gt;</pre></div></div><p></p><p> 基本上，這段代碼，但不是只有三個&lt;a&gt; ，到目前為止，它有 300 個帶有各自的&lt;span&gt; 。</p></div>

Question

我正在創建一種僅基於純文本、沒有圖像或其他任何內容的網站/實驗，它僅包含一個<div>包含幾個<span>和<a>元素，這些元素在使用 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>

基本上，這段代碼，但不是只有三個<a> ，到目前為止，它有 300 個帶有各自的<span> 。

Answer 1

像這樣的東西怎么樣：

<style>
    div {
        position: absolute;
        bottom: 50%;
    }
</style>

<div>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br><br>
    <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span><br><br>
    <span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span><br><br>
    <span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span><br><br>
    <span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</span>
</div>

JSF中。

Answer 2

如果我正確理解您的問題，您不想更改 <div> 框的底部，而是讓它自動滾動到內容的底部。

這可以通過使內容 div 成為反向 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 3

在您的 HTML 文件中，您可以執行此操作以居中（不會是頁面的中心，但中心將與貫穿頁面中間的軸重疊）：

<center>
    <div>
        ...
    </div>
</center>