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

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

news 2026/2/10 3:02:55

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/9 2:42:46

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/2/8 20:42:46

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2026/2/4 20:47:44

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2026/1/28 3:04:35