当前位置：首页 > news >正文

元素居中的方法总结

news 2026/4/3 13:44:05

垂直居中

行内元素垂直居中

单行文本垂直居中

1.line-height: 200px;

多行文本垂直居中

1.table+vertical-align:middle

块级元素垂直居中

1.display: flex;align-items: center;

2.使用position + top +margin-top

水平居中

行内元素水平居中

1.text-align:center

编辑

块级元素水平居中

1.margin: 0 auto;

垂直水平居中

行内元素垂直水平居中

1.文本属性line-height+text-align

块级元素垂直水平居中

1.position+transform

2.flexbox

垂直居中

行内元素垂直居中

单行文本垂直居中

1.line-height: 200px;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div{width: 200px;border: 1px solid red;height: 200px;}span{line-height: 200px;}</style></head><body><div><span> 垂直居中!</span></div></body>
</html>

多行文本垂直居中

1.table+vertical-align:middle

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div{width: 200px;border: 1px solid red;height: 200px;display: table;}span{display: table-cell;vertical-align: middle;}</style></head><body><div><span> 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!</span></div></body>
</html>

2.flex+align-items

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div{width: 200px;border: 1px solid red;height: 200px;display: flex;align-items: center;}</style></head><body><div><span> 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!</span></div></body>
</html>

块级元素垂直居中

1.display: flex;align-items: center;

不是所有的浏览器都可以兼容

2.使用position + top +margin-top

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.out{width: 500px;height: 500px;background-color: skyblue;	position: relative;			}.in{width: 100px;height: 100px;background-color: salmon;position: absolute;top: 50%;margin-top: -50px;}</style></head><body><div class="out"><div class="in"></div></div></body>
</html>

兼容性较好

让一个块级元素垂直居中的八种方法_块元素垂直居中__张张张i的博客-CSDN博客

水平居中

行内元素水平居中

1.text-align:center

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>.parent {text-align: center;}
</style>
</head>
<body><div class='parent'><span>123</span></div>
</body>
</html>

块级元素水平居中

1.margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.child {background: skyblue;width:200px;height:200px;margin: 0 auto;}</style>
</head>
<body><div class='parent'><div class='child'></div></div>
</body>
</html>

垂直水平居中

行内元素垂直水平居中

1.文本属性line-height+text-align

文本属性的话，如果你的行内元素是文本，你可以使用line-height和text-align来实现水平和垂直居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>.parent {width: 500px;height: 500px;background-color: aqua;}span{text-align: center;line-height: 500px;}
</style>
</head>
<body><div class='parent'><span>123</span></div>
</body>
</html>

块级元素垂直水平居中

1.position+transform

.container 元素被设置为相对定位，以作为 .content 元素的定位参考。.content 元素被绝对定位到 .container 内，然后使用 top: 50%; left: 50%; 将其移动到容器的中心。最后，transform: translate(-50%, -50%); 用于微调元素的位置，使其完全居中。

<!DOCTYPE html>
<html>
<head>
<style>.container {position: relative;width: 100%;height: 100vh; /* 或者其他适当的高度 */background-color: aqua;
}.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
</style>
</head>
<body><div class="container"><div class="content">要居中的内容</div>
</div></body>
</html>

2.flexbox

<!DOCTYPE html>
<html>
<head>
<style>.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 使容器铺满整个视口高度 */background-color: lightgray;}.content {display: inline-block; /* 将元素设置为行内块元素 */padding: 20px;background-color: white;}
</style>
</head>
<body><div class="container"><div class="content">要居中的内容</div>
</div></body>
</html>

大多数现代浏览器都支持它。然而，如果你需要考虑更旧的浏览器，特别是IE9及更早版本，Flexbox的支持可能会有限

参考文章来自：

元素居中的N种方法 - 掘金

css 水平居中（8种方法）、垂直居中（8种方法） - 掘金 (juejin.cn)

元素居中的方法总结

目录垂直居中行内元素垂直居中单行文本垂直居中 1.line-height: 200px; 多行文本垂直居中 1.tablevertical-align:middle 块级元素垂直居中 1.display: flex;align-items: center; 2.使用position top margin-top 水平居中行内元素水平居中 1.text-align:cente…...

编程日记 2023/8/31 6:37:17

后端面试话术集锦第一篇：spring面试话术

这是后端面试集锦第一篇博文——spring面试话术❗❗❗ 1. 介绍一下spring 关于spring，我们平时做项目一直都在用，不管是使用ssh还是使用ssm，都可以整合。 Spring主要就三点，也就是核心思想： IOC控制反转 DI依赖注入 AOP切面编程我先说说IOC吧，IOC就是spring里的控制反…...

编程日记 2023/8/31 6:36:16

elasticsearch8.9.1集群搭建

目录 1.官网文档 2.安装步骤 2.1 环境准备 2.2 添加用户 2.3 修改文件profile文件 2.4 修改elasticsearch.yml 2.5 修改 sysctl.conf 3.启动 3.1 切换到kibana 3.2 启动elasticsearch 3.3 启动kibana 3.4 验证节点情况 1.官网文档 elasticsearch文档：ht…...

编程日记 2023/8/31 6:35:14

前端调用电脑摄像头

项目中需要前端调用，所以做了如下操作先看一下效果吧主要是基于vue3，通过canvas把画面转成base64的形式，然后是把base64转成 file文件，最后调用了一下上传接口以下是代码进入页面先调用一下摄像头 navigator.mediaDevices.ge…...

编程日记 2023/8/31 6:34:14

网络编程day1——进程间通信-socket套接字

基本特征：socket是一种接口技术，被抽象了一种文件操作，可以让同一计算机中的不同进程之间通信，也可以让不同计算机中的进程之间通信(网络通信) 本地进程间通信编程模型： 进程A …...

编程日记 2023/8/31 6:33:13

Android-关于页面卡顿的排查工具与监测方案

作者：一碗清汤面前言关于卡顿这件事已经是老生常谈了，卡顿对于用户来说是敏感的，容易被用户直接感受到的。那么究其原因，卡顿该如何定义，对于卡顿的发生该如何排查问题，当线上用户卡顿时，在线…...

编程日记 2023/8/31 6:32:12

VueX 与Pinia 一篇搞懂

VueX 简介 Vue官方：状态管理工具状态管理是什么需要在多个组件中共享的状态、且是响应式的、一个变，全都改变。例如一些全局要用的的状态信息：用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工…...

编程日记 2023/8/31 6:31:11

指针与空间按钮的交互

文章目录原理案例：“直线指针”和“点击按钮”的交互1、效果2、步骤原理指针不能直接和空间按钮交互，得借助一个中间层——分发器——它分发指针的进入、退出、选择事件，空间按钮自动监听这些事件案例：“直线指针”和“点击…...

编程日记 2023/8/31 6:30:10

java八股文面试[数据库]——慢查询优化

编程日记 2023/8/31 6:29:09

《Flink学习笔记》——第十章容错机制

10.1 检查点（Checkpoint） 为了故障恢复，我们需要把之前某个时间点的所有状态保存下来，这份“存档”就是“检查点” 遇到故障重启的时候，我们可以从检查点中“读档”，恢复出之前的状态，这样就可以…...

编程日记 2023/8/31 6:28:08

【LeetCode-中等题】230. 二叉搜索树中第K小的元素

文章目录题目方法一：层序遍历集合排序方法二：中序遍历（栈或者递归 ）方法三（方法二改进）：中序遍历（栈 ） 题目该题最大的特点就是这个树是二叉树： 所以…...

编程日记 2023/8/31 6:27:07

DQL语句的用法（MySQL）

文章目录前言一、DQL语句间接和语法1、DQL简介2、DQL语法二、DQL语句使用1、基础查询（1）查询多个字段（2）为字段设置别名（3）去除重复记录总结前言本文主要介绍SQL语句中DQL语句的功能和使用方法&#…...

编程日记 2023/8/31 6:26:06

【Navicat Premium 16】使用Navicat将excel的数据进行单表的导入，详细操作

业务场景：经常与数据打交道嘛，有的时候会需要将excel的数据导入到数据库中，后面发现对于单表的数据导入，使用Navicat还是非常方便的，仅仅需要将字段关系映射好就可以了一、开始操作前提条件：已经成功连接…...

编程日记 2023/8/31 6:25:05

学习笔记230810--vue项目中get请求的两种传参方式

问题描述今天写了一个对象方式传参的get请求接口方法，发现没有载荷，ip地址也没有带查询字符串，数据也没有响应。代码展示错误分析实际上这里的query是对象方式带参跳转的参数名，而get方法对象方式传参的参数名是parmas 解…...

编程日记 2023/8/31 6:24:03

分享一种针对uni-app相对通用的抓包方案

PART1，前言近年来混合开发APP逐渐成为主流的开发模式，与传统的开发模式相比混合开发极大的提升了开发效率，同时跨平台的特性也降低了开发成本，一直以来混合开发被诟病的性能问题随着技术的发展也得到改善。技术的发展往往是一把…...

编程日记 2023/8/31 6:23:02

【2023百度之星备赛】码蹄集 BD202301 公园（BFS求最短路）

题目 https://www.matiji.net/exam/brushquestion/1/4347/179CE77A7B772D15A8C00DD8198AAC74?from1 题目大意： 给定一个无向图，有两个人往同一个目的地走，分别消耗体力TE、FE。如果他们到某个点汇合了，然后一起走向目的地&…...

编程日记 2023/8/31 6:22:00

2022年下半年系统架构设计师真题（下午带答案）

试题一 (25分) 某电子商务公司拟升级其会员与促销管理系统，向用户提供个性化服务，提高用户的粘性。在项目立项之初，公司领导层一致认为本次升级的主要目标是提升会员管理方式的灵活性，由于当前用户规模不大，业务也相对…...

编程日记 2023/8/31 6:20:58

26、ADS瞬时波形仿真-TRANSIENT仿真（以共射放大器为例）

26、ADS瞬时波形仿真-TRANSIENT仿真（以共射放大器为例） 在本科期间，学习模电的时候总是要对各种三极管电路进行MULTISIM仿真，其实ADS具备相同的功能，而且对于射频电路，使用ADS进行仿真可以结合版图进行&am…...

编程日记 2023/8/31 6:19:57

【微服务部署】02-配置管理

文章目录 1.ConfigMap1.1 创建ConfigMap方式1.2 使用ConfigMap的方式1.3 ConfigMap使用要点建议 2 分布式配置中心解决方案2.1 什么时候选择配置中心2.2 Apollo配置中心系统的能力2.2.1 Apollo创建配置项目2.2.2 项目使用2.2.3 K8s中使用Apollo 1.ConfigMap ConfigMap是K8s提供…...

编程日记 2023/8/31 6:18:55

NTP时钟同步服务器

目录一、什么是NTP？ 二、计算机时间分类三、NTP如何工作？ 四、NTP时钟同步方式（linux） 五、时间同步实现软件（既是客户端软件也是服务端软件） 六、chrony时钟同步软件介绍七、/etc/chrony.conf配置文件介…...

编程日记 2023/8/31 6:17:54

Qwen3.5-9B-AWQ-4bit视觉理解效果实测：表格截图OCR准确率与语义概括质量分析

Qwen3.5-9B-AWQ-4bit视觉理解效果实测：表格截图OCR准确率与语义概括质量分析 1. 模型概述 Qwen3.5-9B-AWQ-4bit是一个支持图像理解的多模态模型，能够结合上传图片与文字提示词，输出中文分析结果。这个量化版本特别适合处理图片主体识别、场…...

编程新知 2026/4/3 13:21:05

《数字孪生为什么90%都是假的》——没有空间数据的“孪生”，只是一个会动的PPT

一、摘要（Executive Summary）近年来，“数字孪生（Digital Twin）”成为智慧城市、工业互联网与数字基础设施建设中的核心关键词。然而，在大量实际项目中，所谓“数字孪生系统”仅停留在三维建模与数…...

编程新知 2026/4/3 12:48:36

SpringBoot+Vue 学科竞赛管理管理平台源码【适合毕设/课设/学习】Java+MySQL

💡实话实说：有自己的项目库存，不需要找别人拿货再加价，所以能给到超低价格。摘要随着教育信息化的快速发展，学科竞赛作为培养学生创新能力和实践能力的重要途径，其管理效率的提升成为高校关注的焦点。传统…...

编程新知 2026/4/3 12:34:32

Scroll Reverser终极指南：让Mac滚动方向完全掌控

Scroll Reverser终极指南：让Mac滚动方向完全掌控【免费下载链接】Scroll-Reverser Per-device scrolling prefs on macOS. 项目地址: https://gitcode.com/gh_mirrors/sc/Scroll-Reverser Scroll Reverser是一款专为macOS设计的开源工具，能够独立…...

编程新知 2026/4/3 12:28:30

MelonLoader Cpp2IL组件加载故障解决方案：从排查到优化

MelonLoader Cpp2IL组件加载故障解决方案：从排查到优化【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 问题现象&am…...

编程新知 2026/4/3 11:09:43

Kafka Connect管理指南：使用可视化工具简化数据同步与集群监控

Kafka Connect管理指南：使用可视化工具简化数据同步与集群监控【免费下载链接】akhq Kafka GUI for Apache Kafka to manage topics, topics data, consumers group, schema registry, connect and more... 项目地址: https://gitcode.com/gh_mirrors/ak/akhq …...

编程新知 2026/4/3 11:07:43

2026虚拟主播动作创作工具专业选型指南，新手也能精准选对

虚拟主播产业的快速发展，推动动作创作工具向高效化、轻量化、专业化升级。随着虚拟主播行业的规范化发展，动作创作的效率与质量成为核心竞争力，传统手动绑定、专业设备驱动的模式已无法满足批量产出需求。本文基于实测数据，结合虚…...

编程新知 2026/4/3 10:01:00

如何快速实现免费离线OCR：Umi-OCR完整使用指南

如何快速实现免费离线OCR：Umi-OCR完整使用指南【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片，PDF文档识别，排除水印/页眉页脚，扫描/生成二维码。内置多国语言库。 …...

编程新知 2026/4/3 9:20:23

解决TranslucentTB中文显示异常的深度指南

解决TranslucentTB中文显示异常的深度指南【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB TranslucentTB是一款能让Windows任务栏实现半透…...

编程新知 2026/4/3 9:12:04

ipa 覆盖算法参数调优实战：从理论到可视化验证

1. IPA覆盖算法核心参数解析在机器人路径规划领域，IPA覆盖算法因其高效性和适应性被广泛应用。这个算法的核心在于几个关键参数的协同作用，它们直接影响着机器人的覆盖路径质量和执行效率。让我们先来认识这些"幕后操控者"： cover…...

编程新知 2026/4/3 6:25:35

垂直居中

行内元素垂直居中

单行文本垂直居中

1.line-height: 200px;

多行文本垂直居中

1.table+vertical-align:middle

块级元素垂直居中

1.display: flex;align-items: center;

2.使用position + top +margin-top

水平居中

行内元素水平居中

1.text-align:center

块级元素水平居中

1.margin: 0 auto;

垂直水平居中

行内元素垂直水平居中

1.文本属性line-height+text-align

块级元素垂直水平居中

1.position+transform

2.flexbox

相关文章：