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

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

news 2025/11/21 4:22:34

        本文主要记录几种常用的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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/11/20 1:11:44

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实现分布式…...

编程新知 2025/11/16 22:19:32

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/11/16 21:47:37

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/11/18 8:57:24

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/11/17 7:57:35

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/11/16 22:42:59

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/11/20 13:07:19

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）

在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...

编程新知 2025/11/4 0:47:29