CSS实现盒子水平居中、垂直居中和水平居中的方法

最新推荐文章于 2026-04-18 03:40:09 发布
原创 最新推荐文章于 2026-04-18 03:40:09 发布 · 1.4k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍了使用CSS实现盒子模型的水平、垂直及同时水平垂直居中的多种方法，包括margin属性、text-align与display组合、position定位、transform及flex布局等，适用于不同场景下子盒子的尺寸要求。

1、CSS实现盒子模型水平居中

HTML:
在这里插入图片描述
CSS全局样式：
在这里插入图片描述
方法一： 使用margin:0 auto;(只适用子盒子有宽度的时候）
在这里插入图片描述
方法二：text-align+display(只适用于子盒子有宽度和高度时)
在这里插入图片描述
在这里插入图片描述
方法三：position定位（只适用于子盒子有宽度和高度）
在这里插入图片描述
在这里插入图片描述
方法四：flex布局(子盒子有没有宽度都适用)
在这里插入图片描述
在这里插入图片描述
2、CSS实现盒子垂直居中

方法一:position(定位) 只适用子盒子有高度宽度时
在这里插入图片描述
在这里插入图片描述
方法二:position+transform(子盒子有或没有宽高都适用)
在这里插入图片描述
方法三：flex布局（子盒子有没有宽高都适用）
在这里插入图片描述
3、实现盒子水平垂直居中
方法一：position(只适用于子元素有宽高适用)
在这里插入图片描述
在这里插入图片描述
方法二：position+transform(子盒子有或没有宽高都适用)
在这里插入图片描述
在这里插入图片描述
方法三：flex布局（子盒子有没有宽高都适用）
在这里插入图片描述

使用定位记住口诀(子绝父相)

evenzx
关注
html5css3重点5：translate和margin分别实现盒子水平垂直居中(采用定位的方法实现水平垂直居中)
小黄呀呀呀的博客
05-18 534
1、translate实现盒子的水平垂直居中显示 <!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>
css实现盒子水平居中，垂直居中和水平居中的方法
weixin_62428490的博客
10-11 602
【代码】css实现盒子水平居中，垂直居中和水平居中的方法。
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法
前端开发工程师博客
06-19 2623
这种方法适用于已经知道width的盒子，实现起来比较简单。这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于已经知道width的盒子。这种方法适用于已经知道width的盒子。
从零搭建工业物联网边缘节点：OpenPLC在树莓派上的实战部署与避坑指南
最新发布
weixin_30667649的博客
04-18 165
本文详细介绍了如何在树莓派上从零搭建工业物联网边缘节点，重点讲解OpenPLC的实战部署与常见问题解决方案。通过硬件准备、系统优化、OpenPLC安装排坑、PLC程序开发到数据可视化集成的全流程指南，帮助开发者低成本实现工业级控制方案，特别适合中小型自动化项目。
CSS盒子居中的6种方法!
bukuaileya的博客
11-15 2万+
1.flex布局设置居中常见的一种方式就是使用flex布局设置居中。利用弹性布局(flex)，实现水平居中，其中justify-content用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式写在父元素上这就是定义了一个伸缩容器主轴对齐方式，默认是横轴纵轴对齐方式，默认是纵轴优点： 简单、方便、快速，三行代码搞定。
CSS-盒子水平居中-持续更新
东东爱编码博客
05-12 2602
文章目录一、CSS-盒子水平居中几种姿势1. 使用margin2. 使用text-algin + inline-block3. 使用fit-content + margin4. 使用flex5. 使用grid6. 使用定位居中【absolute + transform】7. 使用定位居中【absolute + calc】8. 使用定位居中【absolute + 负margin】9. 使用定位居中【absolute + margin:auto】 一、CSS-盒子水平居中几种姿势 演示环境代码： // css
CSS中实现元素水平居中、垂直居中的6个方法（详解）
热门推荐
xtcbql的博客
09-30 7万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
拓展之HTML和CSS实现盒子水平垂直居中的多种方法
2303_78120798的博客
03-18 1935
现代布局方式，简单易用，适合多种场景，尤其是需要对多个子元素进行灵活布局时。强大的二维布局工具，适合复杂布局，能够精确控制子元素的行列位置。适用于单个元素的精确控制，在一些特殊场景下非常有用。适用于需要表格行为的场景，在老旧浏览器中具有较好的兼容性。在Flexbox布局中非常方便，适合快速实现单个元素的居中。通过改变文本的排布方向（如垂直排列），结合其他布局方式（如Flexbox）实现盒子的水平垂直居中。适合需要竖排文字的场景。
CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
weixin_44211097的博客
09-19 482
CSS 实现盒子模型水平居中 水平居中效果图如下： HTML： CSS 全局样式： 方法一：使用margin: 0 auto;（只适用于子盒子有宽的时候） 方法二：text-align + display（子盒子有或没有宽度的时候都适用） 方法三：position 定位（只适用于子盒子有宽度和高度的时候） 方法四：position + transform（子盒子有或没有宽高的时候都适用） 方法五：flex 布局（弹性布局）（子盒子有或没有宽高的时候都适用） .
CSS居中汇总
世界和我们都不该止步于此
05-29 533
行内元素 1.水平局中 text-align:center; 2.水平居中 width:fit-content; // 此时父元素宽度适应子元素宽度 // 再给父元素添加 margin:auto; 3.垂直居中 line-height:父元素高度; // 只能用于单行文本 块级元素 水平居中 // 给子元素 margin:0 auto; 水平垂直居中 1. .father{ position: relative; } .son{ position:absolu
CSS中实现元素居中的七种方法
_江屿_
11-22 3259
CSS中实现元素居中的七种方法
CSS实现: 水平居中 的几种方法
qq_53985958的博客
06-28 2万+
margin值auto、position(子绝父相)+偏移值left+margin-left、position+偏移left+CSS2d transform、text-align:center;+display:inline-block;、display:flex;justify-content:center;margin塌陷:父元素为BFC:overflow:hidden;只设置left:50%;不能实现水平居中:left:50%;与transform:translateX(-50%);中的50%意义不同
论CSS中子盒子在父盒子中水平居中的几种方法
Knight399的博客
12-30 2402
盒子在父元素中水平垂直居中的几种方法
CSS盒子水平垂直居中方法集锦
m0_67805754的博客
04-23 1万+
背景:开发中经常遇到盒子水平垂直居中的问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素,本文汇总了几种简单常用的盒子居中方法,希望可以对前端同行们有一定的帮助 初始html结构及css样式如图所示: 页面初始渲染效果: 下面给div盒子设置样式,实现居中效果 方法一:利用定位+margin:auto来实现 子盒子不设置宽高,则铺满整个父盒子(定位定在了四个角): 子盒子设置宽高和margin:auto效果 实现原理:父级设置为相对..
文字居中、CSS中实现盒子水平垂直居中的方法
频繁记录
06-13 4467
文字居中、CSS中实现盒子水平垂直居中的方法
（css）盒子水平、垂直居中方法
a754334599的博客
02-22 251
利用定位和margin： 1、给要居中盒子的父盒子设置相对定位 2、给要居中的盒子设置固定定位 3、水平left、垂直top都设置为50% 4、利用margin，margin-top和margin-left各设置为负的自身宽高的一半 实例： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA
CSS 实现居中的各种方式
喵喵喵的博客
05-22 3157
总结实现水平居中、垂直居中、水平垂直居中的各种方式
在CSS中如何让盒子水平居中呢？
陈同学
03-25 1万+
在CSS中如何让盒子水平居中是很常见的面试题，盒子居中是相对于父元素来说的，因此我们让盒子居中时，往往采用嵌套的方式，让父盒子套着子盒子 。 在父子盒子嵌套下，让子盒子居中的方式： 第一种方法：margin-auto，使用边框，但是margin使用会影响其他盒子的使用，不太推荐使用； 第二种方法：position，使用定位，子绝父相，再left:50%，margin-left:负的盒子宽...
css之div盒子居中常用方法大全
高电平的博客
09-20 5439
只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。这个方法就是利用绝对定位，使它的top、left、right、bottom都为0就可以实现居中。这个方法用在垂直居中都可以，就使它的上下为 0 就可以实现垂直居中。利用负的margin来进行居中，需要知道固定宽高，限制比较大。这种的话就是将父元素转换成表格单元格显示，然后使用垂直居中实现。这种定位方法，得需要知道宽高，不灵活。这种唯一的缺点就是 IE9 以下不支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值