HTML中div内容垂直居中显示

HTML中要将 div 元素的内容垂直居中显示,你可以使用 CSS 的 flexbox 或者 grid 布局来实现。下面分别介绍两种方法。

方法一:使用 flexbox 布局

复制代码
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh; /* 设置容器高度为视窗高度,以便垂直居中显示 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>这是要垂直居中显示的内容</p>
    </div>
  </body>
</html>

在上述代码中,我们创建了一个具有 container 类名的 div 容器,并将其设置为 flex 布局。通过设置 align-items: centerjustify-content: center 属性,实现了垂直和水平方向上的居中对齐。同时,我们将容器的高度设置为视窗高度(height: 100vh),以确保容器占据整个视窗并垂直居中显示。

方法二:使用 grid 布局

复制代码
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        place-items: center;
        height: 100vh; /* 设置容器高度为视窗高度,以便垂直居中显示 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>这是要垂直居中显示的内容</p>
    </div>
  </body>
</html>

在上述代码中,我们同样创建了一个具有 container 类名的 div 容器,并将其设置为 grid 布局。通过设置 place-items: center 属性,实现了内容在容器中的垂直和水平居中对齐。同样地,我们将容器的高度设置为视窗高度(height: 100vh),以确保容器占据整个视窗并垂直居中显示。

以上两种方法都能实现内容的垂直居中显示,你可以根据自己的需求选择其中一种来使用。

相关推荐
haaaaaaarry17 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin32 分钟前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿42 分钟前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong1 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字1 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木2 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的3 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts