要使一个 <div> 块在其上级 <div>块内垂直居中显示，你可以使用 CSS 的 flexbox
布局。下面是一个示例代码：
<style> .parent { display: flex; justify-content: center; align-items: center; height: 300px; /* 设置上级 div 的高度 */ border: 1px solid #ccc; } .child { width: 200px; height: 100px; background-color: #f1f1f1; }</style><div class="parent"> <div class="child"> <!-- 这里是子 div 内容 --> <!-- 在这个例子中，子 div 将垂直居中显示在其上级 div 中 --> </div></div>在上述代码中，我们创建了一个上级 <div>元素，并给它一个固定的高度（这里设置为 300px）。然后，将其 CSS 属性display 设置为 flex，使其成为一个 flex
容器。接着，使用 justify-content: center; 和align-items: center;分别将子元素在主轴和交叉轴上进行居中对齐。
在上述代码中，我们还创建了一个子 <div>元素，并设置了它的宽度和高度。你可以在这个子 <div>中放置你的内容。最终，子 <div> 元素将在其上级<div> 中垂直居中显示。
通过使用以上的 CSS 样式，你可以实现上级 <div> 中子<div>垂直居中显示的效果。根据实际需求，你可以根据需要调整上级<div> 的高度和子 <div>的宽度、高度来适应你的布局。
相关文章
