<p>要使一个 <code><div></code> 块在其上级 <code><div></code>块内垂直居中显示，你可以使用 CSS 的 flexbox
布局。下面是一个示例代码：</p><div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><a href="#cb1-1"></a><span class="kw"><style></span><a href="#cb1-2"></a> <span class="fu">.parent</span> {<a href="#cb1-3"></a> <span class="kw">display</span>: <span class="dv">flex</span><span class="op">;</span><a href="#cb1-4"></a> <span class="kw">justify-content</span>: <span class="dv">center</span><span class="op">;</span><a href="#cb1-5"></a> <span class="kw">align-items</span>: <span class="dv">center</span><span class="op">;</span><a href="#cb1-6"></a> <span class="kw">height</span>: <span class="dv">300</span><span class="dt">px</span><span class="op">;</span> <span class="co">/* 设置上级 div 的高度 */</span><a href="#cb1-7"></a> <span class="kw">border</span>: <span class="dv">1</span><span class="dt">px</span> <span class="dv">solid</span> <span class="cn">#ccc</span><span class="op">;</span><a href="#cb1-8"></a> }<a href="#cb1-9"></a><a href="#cb1-10"></a> <span class="fu">.child</span> {<a href="#cb1-11"></a> <span class="kw">width</span>: <span class="dv">200</span><span class="dt">px</span><span class="op">;</span><a href="#cb1-12"></a> <span class="kw">height</span>: <span class="dv">100</span><span class="dt">px</span><span class="op">;</span><a href="#cb1-13"></a> <span class="kw">background-color</span>: <span class="cn">#f1f1f1</span><span class="op">;</span><a href="#cb1-14"></a> }<a href="#cb1-15"></a><span class="kw"></style></span><a href="#cb1-16"></a><a href="#cb1-17"></a><span class="kw"><div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"parent"</span><span class="kw">></span><a href="#cb1-18"></a> <span class="kw"><div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"child"</span><span class="kw">></span><a href="#cb1-19"></a> <span class="co"><!-- 这里是子 div 内容 --></span><a href="#cb1-20"></a> <span class="co"><!-- 在这个例子中，子 div 将垂直居中显示在其上级 div 中 --></span><a href="#cb1-21"></a> <span class="kw"></div></span><a href="#cb1-22"></a><span class="kw"></div></span></code></pre></div><p>在上述代码中，我们创建了一个上级 <code><div></code>元素，并给它一个固定的高度（这里设置为 300px）。然后，将其 CSS 属性<code>display</code> 设置为 <code>flex</code>，使其成为一个 flex
容器。接着，使用 <code>justify-content: center;</code> 和<code>align-items: center;</code>分别将子元素在主轴和交叉轴上进行居中对齐。</p><p>在上述代码中，我们还创建了一个子 <code><div></code>元素，并设置了它的宽度和高度。你可以在这个子 <code><div></code>中放置你的内容。最终，子 <code><div></code> 元素将在其上级<code><div></code> 中垂直居中显示。</p><p>通过使用以上的 CSS 样式，你可以实现上级 <code><div></code> 中子<code><div></code>垂直居中显示的效果。根据实际需求，你可以根据需要调整上级<code><div></code> 的高度和子 <code><div></code>的宽度、高度来适应你的布局。</p>
本文介绍了在 CSS 中实现将 div 内容在垂直方向上居中显示的几种常见方法，包括使用 Flexbox 布局、Grid 布局、绝对定位与 transform 属性以及 display: table-cell 和 vertical-align 属性的应用。读者可以根据自己的项目需求和个人偏好选择适合的方法来实现垂直居中效果。