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

div 中元素居中的N种常用方法

news 2026/2/9 20:11:22

        本文主要记录几种常用的div盒子水平垂直都居中的方法。本文主要参考了该篇博文并实践加以记录说明以加深理解记忆 css之div盒子居中常用方法大全

        本文例子使用的 html body结构下的div 盒子模型如下：

<body><div class="container"><div class="box"></div></div>
</body>

         例子盒子居中效果都如下图：

注：当把div 盒子模型中子div换成其他块级元素，如<p>或<h1>~<h6>时，以下方法仍然奏效。但当把子div换成行内元素，如<span>时，第6,第7种方法将失效。

1、弹性布局 设置容器项目在横轴和纵轴上都居中对齐

<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;display: flex;justify-content: center;align-items: center;}.box{width: 120px;height: 120px;background: #55a9ff;}
</style>

 

2、弹性布局 设置容器项目 margin:auto

        该方法可以不设置容器项目横轴和纵轴的对齐方式，直接设置margin:auto即可2、弹性布局 设置容器项目 margin:auto

<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;display: flex;}.box{width: 120px;height: 120px;margin: auto;background: #55a9ff;}
</style>

  

3、绝对定位法

        父div要使用其中一种定位方式：relative / absolute / sticky / fixed，子div使用绝对定位，并使它的 top、left、right、bottom 都为0且margin:auto 即可

<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{width: 120px;height: 120px;position: absolute;background: #55a9ff;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
</style>
  • 绝对定位法还可以只设置top、bottom为0，实现只垂直居中
<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{width: 100px;height: 100px;position: absolute;background: #55a9ff;top: 0;bottom: 0;margin: auto;}
</style>

  •  同理可以只设置left、right为0，实现只水平居中 

4、transform居中法

        使用 transform 可以不用管子div自身的宽高，但要设置父子div的position属性，可都设置成 relative / absolute，此方法IE9 以下不支持

<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{width: 120px;height: 120px;position: absolute;background: #55a9ff;top: 50%;left: 50%;transform: translate(-50%,-50%);}	
</style>

5、负margin居中

        利用子div 负的margin来进行居中，此方法要知道子div固定的宽高，且margin-top、margin-left 要是子div 自身宽高负的一半值

<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{width: 120px;height: 120px;position: absolute;background: #55a9ff;top: 50%;left: 50%;margin-top: -60px;margin-left: -60px;}	/* 如果box的宽高都是100px,那margin-top和margin-left要是-50px */
</style>

6、margin固定宽高居中

        此方法要知道父子div的宽高，且要算出子div的margin 的高度和宽度 恰好在父div居中

该方法把子div换成行内元素，如<span>时将会失效

<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;}.box{width: 120px;height: 120px;background: #55a9ff;margin: 90px 90px;}/* 如果 box 的宽高都是 100px,那么 margin: 100px 100px; */
</style>

7、table-cell居中

        此方法是将父div转换成表格单元格显示，然后使用垂直居中并且子div左右margin auto实现，该方法把子div换成行内元素，如<span>时将会失效

<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;display: table-cell;vertical-align: middle;}.box{width: 120px;height: 120px;background: #55a9ff;margin: 0 auto;				/* 不能省 */}
</style>

8、不确定宽高居中(绝对定位百分数)

        此方法不设置子div的宽高，其宽高根据设置占用父div的比例来算，left和right的百分数一样就可以实现水平居中，top和bottom的百分数一样就可以实现垂直居中。其中子div要设置成绝对定位，父div 要设置成 relative / absolute / fixed / sticky

<style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;position: relative;}.box{position: absolute;background: #55a9ff;top: 25%;left: 25%;right: 25%;bottom: 25%;margin: auto;}/* top / left / right / bottom 设置的比例不一样，box 的宽高将会随之变大或变小*/
</style>

以上方法如有错误请各位不吝指教，如以后有别的方法将会往下继续添加，各位有其他方法可留言告知。

相关文章：

div 中元素居中的N种常用方法

本文主要记录几种常用的div盒子水平垂直都居中的方法。本文主要参考了该篇博文并实践加以记录说明以加深理解记忆 css之div盒子居中常用方法大全 本文例子使用的 html body结构下的div 盒子模型如下&#xff1a; <body><div class"container"><div c…...

编程日记 2023/8/14 7:00:27

Java获取指定文件夹下目录下所有视频并复制到另一个地方

import java.io.File; import java.io.IOException; import java.nio.file.Files; import java.nio.file.StandardCopyOption;public class VideoCopier {public static void main(String[] args) {// 指定源文件夹路径和目标文件夹路径String sourceFolderPath "path/to…...

编程日记 2023/8/14 6:59:24

windows server 2016 搭建使用 svn 服务器教程

参考教程&#xff1a; https://zhuanlan.zhihu.com/p/428552058 https://blog.csdn.net/weixin_33897722/article/details/85602029 配置环境 windows server 2016 远程服务器公网 ip 安装 SVN 服务端 下载 svn 服务端安装包&#xff1a;https://www.visualsvn.com/download…...

编程日记 2023/8/14 6:58:23

【Python】如何判断时间序列数据是否为平稳时间序列或非平稳时间序列？

判断时间序列数据是否为平稳时间序列或非平稳时间序列&#xff0c;通常可以通过以下方法&#xff1a; &#xff08;1&#xff09;观察时间序列数据的均值和方差是否随时间变化而发生明显的改变。若均值和方差变化明显&#xff0c;则该时间序列数据可能为非平稳时间序列&#x…...

编程日记 2023/8/14 6:57:20

Labview控制APx（Audio Precision）进行测试测量（六）

用 LabVIEW 驱动 VIs生成任意波形 在 APx500 应用程序中&#xff0c;默认波形类型为正弦。这是指 APx 内置的正弦发生器&#xff0c;根据信号路径设置&#xff0c;许多测量还允许其他内置波形&#xff0c;如方波&#xff0c;分裂正弦波或分裂相位&#xff0c;以及使用导入的。w…...

编程日记 2023/8/14 6:56:19

【Linux】网络协议总结

目录 网络协议总结 应用层 传输层 网络层 数据链路层 网络协议总结 应用层 应用层的作用&#xff1a;负责应用程序间沟通&#xff0c;完成一系列业务处理所需服务。能够根据自己的需求&#xff0c;设计对应的应用层协议。了解HTTP协议。理解DNS的原理和工作流程。 传…...

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

如何轻松注册企业邮箱？快速掌握超简单的注册技巧！

随着互联网的发展&#xff0c;越来越多的企业开始使用电子邮件作为通信工具。企业邮箱不仅可以提高企业的工作效率&#xff0c;还可以使企业通信更加便捷、保密性更高。那么&#xff0c;企业邮箱怎么注册申请呢&#xff1f;下面我们来详细介绍一下。 第一步&#xff1a;选择邮箱…...

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

【行为型设计模式】C#设计模式之观察者模式

题目&#xff1a;假设你正在开发一个简单的新闻发布系统&#xff0c;该系统允许用户订阅不同的新闻频道&#xff0c;并在有新闻发布时向订阅者发送通知。使用观察者模式设计和实现该系统。观察者模式的相关概念和定义&#xff1a; 观察者模式是一种行为设计模式&#xff0c;它定…...

编程日记 2023/8/14 6:53:16

《Java面向对象程序设计》学习笔记——第 8 章 设计模式

​专栏&#xff1a;《Java面向对象程序设计》学习笔记 第 8 章 设计模式 一个好的设计系统往往是易维护、易扩展、易复用的。 8.1 设计模式简介 8.1.1 什么是设计模式 一个设计模式 (pattern) 是针对某一类问题的最佳解决方案&#xff0c;而且己经被成功应用于许多系统的设…...

编程日记 2023/8/14 6:52:15

Java学习笔记28——字节流1

IO流概述和分类 IO流IO流的分类字节流字节流写数据FileOutputStream字节流写数据的三种方式字节流写数据的两个问题字节流写数据加异常处理 IO流 IO&#xff1a;输入输出 流&#xff1a;一种抽象的概念&#xff0c;是对数据传输的总称&#xff0c;流的本质就是数据传输 IO流的…...

编程日记 2023/8/14 6:51:14

C++连接串口方式（MFC版本）(简单版本)

ComSerialPort.h /*_________________________串口________________________________*/class Com_SerialPort { public:Com_SerialPort();Com_SerialPort(int port, int baudRate, int byteSize, int parity, int stopBits);~Com_SerialPort(); public:bool Connect(bool bMut…...

编程日记 2023/8/14 6:50:12

ospf重发布

华子目录 一、实验拓扑二、实验要求三、实验思路1、配置接口IP地址以及环回地址&#xff08;以此类推&#xff09;2、配置动态路由协议3、重发布4、更改接口类型5、配置路由策略 一、实验拓扑 二、实验要求 1、使用双点双向重发布2、所有路由器进行最佳选路3、存在备份路径&am…...

编程日记 2023/8/14 6:49:11

基于weka手工实现K-means

一、K-means聚类算法 K均值聚类&#xff08;K-means clustering&#xff09;是一种常见的无监督学习算法&#xff0c;用于将数据集中的样本划分为K个不同的类别或簇。它通过最小化样本点与所属簇中心点之间的距离来确定最佳的簇划分。 K均值聚类的基本思想如下&#xff1a; …...

编程日记 2023/8/14 6:48:10

分布式系统监控zabbix安装部署及使用

分布式系统监控zabbix安装部署及使用 一.zabbix监控 1.什么是zabbix zabbix&#xff1a;是一款开源免费的&#xff0c;自动化发现服务与网络设备的分布式监控&#xff0c;可以监视应用层服务并以web前端页面集中管理并展示。 2.zabbix功能 监控服务器cpu负载、服务器内存使…...

编程日记 2023/8/14 6:47:08

【H5】使用 JavaScript 和 CSS 来完成实现鼠标接触时显示一个图片弹窗

以下是一个示例&#xff0c;演示了如何在鼠标接触时显示一个图片弹窗&#xff1a; HTML: <a href"#" class"popup-link" target"_blank"><i class"fab fa-weixin"></i> </a><div id"popup-containe…...

编程日记 2023/8/14 6:46:07

CSS选择器分类梳理并高亮重点

前言 主要内容来自菜鸟教程 CSS 选择器 | 菜鸟教程 分类是我自己理解的分类&#xff0c;示例说明优化统一了表述风格。 正文 选择器CSS示例示例说明基础*2*选择所有元素:root3:root选择文档的根元素element1p选择所有<p>元素:not(selector)3:not(p)选择所有并非p元素…...

编程日记 2023/8/14 6:45:04

Python批量给excel文件加密

有时候我们需要定期给公司外部发邮件&#xff0c;在自动化发邮件的时候需要对文件进行加密传输。本文和你一起来探索用python给单个文件和批量文件加密。    python自动化发邮件可参考【干货】用Python每天定时发送监控邮件。 文章目录 一、安装pypiwin32包二、定义给excel加…...

编程日记 2023/8/14 6:44:04

程序设计 树基础

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…...

编程日记 2023/8/14 6:43:03

Java 并发编程与CAS基本原理

一、Java并发基础知识 Java里的程序天生就是多线程的&#xff0c;那么有几种新启线程的方式&#xff1f; 两种,启动线程的方式只有&#xff1a; 1、X extends Thread;&#xff0c;然后X.start&#xff1b; 2、X implements Runnable&#xff1b;然后交给Thread运行。 Java…...

编程日记 2023/8/14 6:42:01

qt creater运行按钮灰色，问题记录

第一次安装还没运行就出了三个错误&#xff1a; 1.F:\wei\Qt\Tools\CMake_64\share\cmake-3.24\Modules\CMakeTestCXXCompiler.cmake:62: error: The C compiler "C:/Program Files (x86)/Microsoft Visual Studio 14.0/VC/BIN/amd64/cl.exe" is not able to compil…...

编程日记 2023/8/14 6:41:00

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2026/1/22 15:36:10

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2026/1/31 6:53:53

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2026/2/5 5:58:30

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

编程新知 2026/2/7 4:19:21

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析 光看题目要求和例图&#xff0c;感觉这题好麻烦&#xff0c;直线不能相交啊&#xff0c;每个数字只属于一条连线啊等等&#xff0c;但我们结合题目所给的信息和例图的内容&#xff0c;这不就是最长公共子序列吗&#xff1f;&#xff0c;我们把最长公共子序列连线起…...

编程新知 2026/2/6 8:12:10

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...

编程新知 2026/2/7 2:24:22