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

CSS【详解】居中对齐（水平居中 vs 垂直居中）

news 2025/11/22 9:43:05

水平居中

内部块级元素的宽度要小于容器(父元素)

方案一：文本居中对齐（内联元素）

限制条件：仅用于内联元素 display:inline 和 display: inline-block;

给容器添加样式

text-align:center

在这里插入图片描述

<!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>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;text-align: center;}.item {display: inline-block;width: 400px;background: yellow;}</style></head><body><div class="box"><span>水平居中 -- display: inline</span></div><div class="box"><div class="item">水平居中 -- display: inline-block</div></div></body>
</html>

方案二：自动外边距（块级元素）

限制条件：仅用于块级元素 display:block;

给内部元素添加样式

margin: auto

在这里插入图片描述

<!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>.box {margin: 30px;border: 1px solid gray;}.item {margin: auto;width: 300px;background: yellow;}</style></head><body><div class="box"><div class="item">水平居中 -- 块级元素 display:block</div></div></body>
</html>

方案三：flex布局【推荐】

给容器添加样式

display: flex;
justify-content: center;

在这里插入图片描述

<!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>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;display: flex;justify-content: center;}.item {width: 400px;background: yellow;}</style></head><body><div class="box"><span>水平居中 -- flex布局 display: inline</span></div><div class="box"><div class="item">水平居中 -- flex布局 display: block</div></div></body>
</html>

方案四：子绝父相 + transform （CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left: 50%;
transform: translate(-50%, 0);

在这里插入图片描述

<!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>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 50%;transform: translate(-50%, 0);}</style></head><body><div class="box"><span class="item">水平居中 -- 子绝父相 + transform</span></div></body>
</html>

方案五：子绝父相 + 自动外边距（指定宽度）

限制条件：内部元素需限定宽度

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left: 0;
right: 0;
margin: auto;

在这里插入图片描述

<!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>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 0;right: 0;margin: auto;width: 300px;}</style></head><body><div class="box"><span class="item">水平居中 -- 子绝父相 + 自动外边距</span></div></body>
</html>

方案六：子绝父相 + 负外边距（知道宽度 + 宽度计算）

限制条件：需知道内部元素的宽度（无法预知宽度的内联元素和未知宽度的块级元素都不适用）

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left:50%;
margin-left:-内部元素宽度的一半

<!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>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {width: 400px;background: yellow;position: absolute;left: 50%;margin-left: -200px;}</style></head><body><div class="box"><div class="item">水平居中 -- 绝对定位元素 position:absolute</div></div></body>
</html>

垂直居中

内部块级元素的高度要小于容器(父元素)

方案一：行高 = 容器高度（单行内联元素）

限制条件：仅用于单行内联元素 display:inline 和 display: inline-block;

给容器添加样式

 height: 100px;line-height: 100px;

在这里插入图片描述

<!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>.box {margin: 30px;border: 1px solid gray;height: 100px;line-height: 100px;}</style></head><body><div class="box"><span class="item">垂直居中 -- 内联元素 display:inline</span></div></body>
</html>

方案二：flex布局【推荐】

给容器添加样式

display: flex;
align-items: center;

方案三：子绝父相 + transform（CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 50%;
transform: translate(0, -50%);

在这里插入图片描述

<!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>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 50%;transform: translate(0, -50%);background-color: yellow;}</style></head><body><div class="box"><div class="item">垂直居中 -- 子绝父相 transform</div></div></body>
</html>

方案四：子绝父相 + 自动外边距（指定高度）

限制条件：内部元素需限定高度

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 0;
bottom: 0;
margin: auto;

内联元素也有效，因为内联元素绝对定位后，display 会变为 block

在这里插入图片描述

<!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>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 0;bottom: 0;margin: auto;background-color: yellow;height: 50px;}</style></head><body><div class="box"><span class="item">垂直居中 -- 子绝父相 + 自动外边距</span></div></body>
</html>

方案五：子绝父相 + 负外边距（知道高度 + 高度计算）

限制条件：需知道内部元素的高度

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 50%;
margin-top: -内部元素高度的一半;

在这里插入图片描述

<!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>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 50%;margin-top: -25px;height: 50px;background-color: yellow;}</style></head><body><div class="box"><span class="item">垂直居中 -- 子绝父相 + 负外边距</span></div></body>
</html>

水平垂直居中

参考上文分别实现水平居中和垂直居中即可，常用方案如下：

方案一：flex布局【推荐】

给容器添加样式

display: flex;
justify-content: center;
align-items: center;

方案二：子绝父相 + transform （CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

方案三：子绝父相 + 自动外边距（指定高度和宽度）

给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

方案四：子绝父相 + 负外边距（知道宽度和高度 + 宽度和高度计算）

限制条件：需知道内部元素的宽度和高度
给容器（父元素）添加样式

position: relative

给内部元素添加样式

position: absolute;
left:50%;
margin-left:-内部元素宽度的一半;
top: 50%;
margin-top: -内部元素高度的一半;

在这里插入图片描述

<!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>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 100px;position: relative;}.item {background-color: yellow;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -25px;width: 300px;height: 50px;}</style></head><body><div class="box"><span class="item">水平垂直居中 -- 子绝父相 + 负外边距</span></div></body>
</html>

CSS【详解】居中对齐（水平居中 vs 垂直居中）

水平居中内部块级元素的宽度要小于容器(父元素) 方案一：文本居中对齐（内联元素） 限制条件：仅用于内联元素 display:inline 和 display: inline-block; 给容器添加样式 text-align:center<!DOCTYPE html> <html lang&q…...

编程日记 2024/3/2 10:02:30

【排序算法】基数排序

一：基本概念 1.1 基数排序(桶排序)介绍基数排序（radix sort）属于“分配式排序”（distribution sort），又称“桶子法”（bucket sort）或bin sort，顾名思义，它是…...

编程日记 2024/3/2 10:00:28

解释存储过程和函数的区别，以及它们在MySQL中的用途。如何创建和使用存储过程和函数?

解释存储过程和函数的区别，以及它们在MySQL中的用途。存储过程和函数在MySQL中的区别及用途区别： 返回值： 函数：必须有一个返回值，这可以是一个标量值或一个表。如果没有明确的RETURN语句，函数将返回N…...

编程日记 2024/3/2 9:59:27

【GPU驱动开发】-GPU架构简介

前言不必害怕未知，无需恐惧犯错，做一个Creator！ GPU（Graphics Processing Unit，图形处理单元）是一种专门用于处理图形和并行计算的处理器。GPU系统架构通常包括硬件和软件层面的组件。一、总体流程应…...

编程日记 2024/3/2 9:56:25

m位数问题(c++题解)

题目描述考官只给两个整数n和m（1 < n < 8，1< m <5），要求选手从1,2,…,n中取出m个数字，组成一个m位整数，统计所有的m位整数中一共有多少个素数。如n3,m2时，符合条件的整数有&…...

编程日记 2024/3/2 9:55:24

洛谷P1331海战

题目背景在峰会期间，武装部队得处于高度戒备。警察将监视每一条大街，军队将保卫建筑物，领空将布满了 F-2003 飞机。此外，巡洋船只和舰队将被派去保护海岸线。不幸的是，因为种种原因，国防海军部仅有很少…...

编程日记 2024/3/2 9:54:23

如何利用Flutter来写后端服务端应用

前言 Flutter是谷歌推出的一款跨平台开发框架，现在属于此领域star最多的框架，其被广泛应用于构建前台界面，但或许很少人知道，他也可以写后端应用。本文主角 flutter非常著名的getx库推出的get server jonataslaw/get_server:…...

编程日记 2024/3/2 9:53:22

数据页和缓存页（BufferPool）

1. 数据页（dataPage） 什么是数据页？ 数据页是 MySQL 存储引擎在磁盘和内存之间传输数据的基本单位，默认大小为16KB。数据页的结构： 表头：储存与页相关的元信息，比如，页号&#…...

编程日记 2024/3/2 9:52:21

LibreOJ 136. 最小瓶颈路题解最小生成树倍增

题目链接：LibreOJ 136. 最小瓶颈路题目描述： 给定一张无向图，询问两个结点之间的最小瓶颈路。u和v两个结点之间最小瓶颈路指的是u和v的每条路径中经过的最大边权的最小值。题解： 给出结论：无向图的最小瓶颈路与其最小…...

编程日记 2024/3/2 9:51:21

前端学习第三天-css基础

1. CSS简介从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能…...

编程日记 2024/3/2 9:50:19

各种使用chatgpt prompts技巧

1，利用chatgpt生成照片 1.1，从现在起, 当你想发送一张照片时，请使用 Markdown ,并且不要有反斜线, 不要用代码块。使用 Unsplash API (https://source.unsplash.com/1280x720/? < PUT YOUR QUERY HERE >)。如果你明白了，请回复“明白” 1.2，开始提问生成指定场景照…...

编程日记 2024/3/2 9:46:16

基于单片机的企业指纹考勤系统设计

摘要: 考勤系统是企业人力资源管理的重要依据，传统的考勤系统不能保证准确性，也存在地域局限，不能满足一些跨区域集团公司的考勤要求。文章以单片机技术以及生物特征识别技术为基础，分析企业单片机智能化指纹考勤系统的设计思路，从硬件设备的选型和配置、软件系统的开发、…...

编程日记 2024/3/2 9:45:15

JUC(java.util.concuurrent)的常见类介绍

Java 并发包（java.util.concurrent，简称 JUC）提供了一系列的工具和框架，用于简化并发编程。以下是 JUC 包中常见类的介绍： Callable： Callable 接口是 Java 提供的一个带返回值的任务接口，类似于…...

编程日记 2024/3/2 9:44:14

【中科院计算所】WSDM 2024冠军方案：基于大模型进行多文档问答

作者：李一鸣张兆中科院计算所会话式多文档问答旨在根据检索到的文档以及上下文对话来回答特定问题。在本文中，我们介绍了 WSDM Cup 2024 中“对话式多文档 QA”挑战赛的获胜方法，该方法利用了大型语言模型 (LLM) 卓越的自然语言理解和生…...

编程日记 2024/3/2 9:43:13

使用 MediaStore获取指定文件夹的视频，更优化方法： import android.content.ContentResolver; import android.content.ContentValues; import android.content.Context; import android.net.Uri; import android.os.Build; import android.os.Environme…...

编程日记 2024/3/2 9:42:12

基于django的购物商城系统

摘要本文介绍了基于Django框架开发的购物商城系统。随着电子商务的兴起，购物商城系统成为了许多企业和个人创业者的首选。Django作为一个高效、稳定且易于扩展的Python web框架，为开发者提供了便捷的开发环境和丰富的功能模块，使得开发购物商…...

编程日记 2024/3/2 9:41:11

Swagger3 使用详解

Swagger3 使用详解一、简介1 引入依赖2 开启注解3 增加一个测试接口4 启动服务报错1.5 重新启动6 打开地址：http://localhost:8093/swagger-ui/index.html 二、Swagger的注解1.注解Api和ApiOperation2.注解ApiModel和ApiModelProperty3.注解ApiImplicitParams和Api…...

编程日记 2024/3/2 9:39:09

JVM 第二部分-2（堆，方法区）

4.堆堆一个Java程序（main方法）对应一个jvm实例，一个jvm实例只有一个堆空间堆是jvm启动的时候就被创建，大小也确定了。大小可以用参数设置。堆是jvm管理的一块最大的内存空间核心区域，是垃圾回收的重点区域堆可以位…...

编程日记 2024/3/2 9:38:09

蓝桥杯Java B组历年真题（2013年-2019年）

一、2013年真题 1、世纪末的星期使用日期类判断就行，这里使用LocalDate，也可以使用Calendar类答案 2099 使用LocalDate import java.time.LocalDate; import java.time.format.DateTimeFormatter; // 1:无需package // 2: 类名必须Main, 不可修改p…...

编程日记 2024/3/2 9:37:08

你是谁，便会遇见谁

就会进什么样的圈子。努力提升自己，才是提升阶层最可靠的方法。在人生的舞台上，每一个人都是自己人生的主角。而在这个旅程中，我们会遇见各种各样的人，进入不同的社交圈子。正如一句古训所说：“你是谁，便…...

编程日记 2024/3/2 9:36:07

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2025/11/21 7:36:51

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2025/11/16 21:46:46

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/11/17 0:33:49