技术栈

div水平垂直居中

fanruitian2026-02-04 11:15

使用flex

复制代码
<div style="
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: green;
    height: 500px;
">
		
		<div>
			hello
		<div>
		
	</div>

</div></div>

主要就三行:

display: flex;

align-items: center; // 水平居中

justify-content: center; // 垂直居中

上一篇:rk3576 Ubuntu 22.04 安装与配置 VNC(TigerVNC + x11vnc)
下一篇:LeetCode 3013.将数组分成最小总代价的子数组 II:两个堆维护k-1小 + 滑动窗口
相关推荐
旭久
1 小时前
react+antd实现一个支持多种类型及可新增编辑搜索的下拉框
前端·javascript·react.js
摘星编程
1 小时前
用React Native开发OpenHarmony应用:Loading加载状态组件
javascript·react native·react.js
aesthetician
2 小时前
Spotify 网页版前端技术全面解析
前端
咩图
2 小时前
Sketchup软件二次开发+Ruby+VisualStudioCode
java·前端·ruby
Можно
2 小时前
从零开始:Vue 框架安装全指南
前端·javascript·vue.js
阿蒙Amon
2 小时前
TypeScript学习-第9章:类型断言与类型缩小
javascript·学习·typescript
福大大架构师每日一题
2 小时前
agno v2.4.7发布!新增Else条件分支、AWS Bedrock重排器、HITL等重大升级全解析
javascript·云计算·aws
.清和.
2 小时前
【js】Javascript事件循环机制
开发语言·javascript·ecmascript
蜗牛攻城狮
2 小时前
CSS中的 `dvh` 与 `vh`: 深入理解视口单位
前端·css
热门推荐
01GitHub 镜像站点02OpenCode 入门教程:介绍 · 安装 · 配置第三方 API (如 Claude)032025 年大语言模型发展回顾:关键突破、意外转折与 2026 年展望04Claude Code Skills 实用使用手册05Clawdbot 中文汉化版 接入微信、飞书06一文了解国产算子编程语言 TileLang,TileLang 对国产开源生态的影响与启示07在Trae中使用Pencil MCP08Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services09UV安装并设置国内源10Vue-skills的中文文档