不使用 Flexbox 的 CSS 元素居中对齐示例</</desc> <question vote="29"> <p>我在让文本显示在网页屏幕中间（高度方向）时遇到问题。该网站的 HTML 是：</p> <pre><code><html lang="en"> <head> <title>example</title> <link href="example.css" rel="stylesheet"> </head> <body> <div class="home-container"> <div class="home-row"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </div> </body> </html> </code></pre> <p>我想要做的是将 home-container 元素一直延伸到页面底部，并将 <pre><code>text that should be in the middle</code></pre> 放在它的中间。我的 <pre><code>css</code></pre> 看起来像：</p> <pre><code>html, body{ height:100%; } .home-container{ width: 100%; height: 100%; background-color: rgba(139,0,0,0.4); } .home-row{ vertical-align: middle; } </code></pre> <p>我明白，如果我像这样制作<pre><code>home-container</code></pre>，我想做的事情是可能的：</p> <pre><code>.home-container{ width: 100%; height: 100%; background-color: rgba(139,0,0,0.4); align-items: center; display: flex; } </code></pre> <p>但这并不适用于所有浏览器。我对 <pre><code>vertical-align</code></pre> 属性做错了什么？在我的例子中，ID 并没有真正做任何事情......</p> </question> <answer tick="true" vote="22"> <p>要使用 <pre><code>vertical-align:middle</code></pre>，请在 <pre><code>display:table-cell</code></pre> 上添加 <pre><code>.home-row</code></pre>，并在 <pre><code>display:table</code></pre><pre> 上添加 </pre><code>.home-container</code></p> <p>参见这里<strong><a href="https://jsfiddle.net/Mihai_T/9rs2fayj/3/" rel="noreferrer">jsfiddle</a></strong>或片段</p> <p></p><div data-babel="false" data-lang="js" data-hide="true" data-console="true"> <div> <pre><code>html, body { height: 100%; } .home-row { vertical-align: middle; display: table-cell; } .home-container { width: 100%; height: 100%; background-color: rgba(139, 0, 0, 0.4); display: table; }</code></pre> <pre><code><div class="home-container"> <div class="home-row"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </div></code></pre> </div> </div> <p></p> <p><em><strong>vertical-align</strong> CSS 属性指定内联或表格单元格框的垂直对齐方式。</em></p> <p>在此处阅读更多内容<strong><a href="https://developer.mozilla.org/en/docs/Web/CSS/vertical-align" rel="noreferrer">垂直对齐</a></strong></p> <p><strong>编辑 2020 年</strong> 有一种更好的方法可以使用 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" rel="noreferrer"><pre><code>flexbox</code></pre></a></p> 获得相同的结果 <p>检查下面的片段</p> <p>与<pre><code>flexbox</code></pre>一起玩。您可以将其添加到其他物品上，而不仅仅是容器</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.home-container { background: red; display:flex; flex-direction: column; justify-content: center; height:100vh; }</code></pre> <pre><code><div class="home-container"> <div class="home-row"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="15"> <p>试试这个：</p> <pre><code> <style> .home-container { width: 100%; height: 800px; background-color: rgba(139, 0, 0, 0.4); text-align: center; } .some-other-class { position: relative; top: 50%; transform: translateY(-50%); } </style> </code></pre> <p>HTML</p> <pre><code><div class="home-container"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </code></pre> </answer> <answer tick="false" vote="8"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>html, body{ height:100%; margin: 0; } .home-container{ width: 100%; height: 100%; display: table; text-align: center; background-color: rgba(139,0,0,0.4); } .home-row{ display: table-cell; vertical-align: middle; }</code></pre> <pre><code><html lang="en"> <head> <title>example</title> <link href="example.css" rel="stylesheet"> </head> <body> <div class="home-container"> <div class="home-row"> <div class="some-other-class"> <p>text that should be in the middle</p> </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <pre><code><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animations</title> <link rel="stylesheet" href="animations.css"> </head> <body> <div class="magic"> <p> magic </p> </div> </body> </html> .magic{ animation-name: rainbow; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; padding: 20px; margin: 20px; height: 150px; width: 150px; text-align: center; margin: auto; color: white; display: table; } .magic p{ display: table-cell; vertical-align: middle; } @keyframes rainbow{ 0%{background-color: red;} 20%{background-color: orange;} 40%{background-color: yellow; color: black;} 60%{background-color: green;} 80%{background-color: blue;} 100%{background-color: purple;} } </code></pre> </answer> </body></html>