你不得不知道的使一个盒子水平垂直居中的五种方法

最新推荐文章于 2025-05-16 09:49:31 发布
最新推荐文章于 2025-05-16 09:49:31 发布
阅读量277 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： html 文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_57396733/article/details/124570361
本文详细介绍了网页布局中子元素居中显示的五种常见方法：定位法、transform属性法、手动计算法、flex布局法和margin auto法。每种方法都有其适用场景，理解并掌握这些技巧对于前端开发者来说至关重要。通过实例代码和解释，帮助读者深入理解各种布局策略。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.需求

初始代码及盒子效果

2.方法一：利用定位 子绝父相

子盒子定位(距父盒子宽度、高度一半的位置)，然后再移动自身宽度、高度的一半

3.方法二 利用transform

相当于是简化了方法一的margin-top:-50px;margin-left:-50px

4.方法三 手动计算父盒子与子盒子的空间距离

5.方法四 利用disply:flex

注意：在父盒子中设置，对子盒子生效，不要错给子盒子设置

 6.方法五 利用margin:auto

7.方法六 利用display:table-cell

CSS3学习笔记总结，你值得拥有（呕心沥血之作，涵盖CSS3所有知识点）
孙叫兽的博客
08-21 4064
注意：本文演示的运行结果使用的是在线编译器，只显示body里面的内容，大家可以用浏览器进行查看完整效果包含head。 简介 CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 边框 用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
综合一
刘群智的博客
07-27 4433
自我介绍 左固定右自适应布局 这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局： <div id="outer">   <div id="sidebar" style="height:240px;">固定宽度区</div>   <d
一个盒子垂直水平居中的几种方法
qq_43692768的博客
11-01 1929
一个盒子垂直水平居中的几种方法总结 效果展示： HTML代码： <div id="container"> <div id="box"></div> </div> css基本样式： #container { width: 100%; height: 600px; border: 1px solid black; } #box { width: 100px; height: 100px;
如何使一个盒子水平垂直居中？（5类8种）
weixin_50517811的博客
11-03 2355
如何使一个盒子水平垂直居中？flex布局/grid布局/position布局/table布局/line-height
CSS实现盒子水平垂直居中
2301_76459194的博客
05-16 221
在开发中，实现盒子水平垂直居中是常见需求。本文介绍了两种常用方法：1. 通过定位与平移实现，使用position: absolute结合transform: translate(-50%, -50%)，适用于单层盒子；2. 通过弹性盒子实现，使用display: flex结合align-items: center和justify-content: center，适用于父容器内居中。两种方法各有适用场景，开发者可根据具体需求选择。
盒子水平垂直居中常用的六种方法
Angel_Tears_的博客
08-09 9849
盒子水平垂直居中常用的六种方法,在写前端代码的时候,我们经常用到盒子的水平垂直居中,这里说的水平垂直居中都要有一个参照物,也就是子盒子相对于父盒子的水平垂直居中,方法一:利用定位 父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50% 有时候,要实现一些元素水平垂直都居中,这部分元素呢,可能大小未知,例如一些图片或者一些未知大小的块元素,margin:auto会
CSS之盒子居中的方法
a804847944的博客
07-30 1157
一、盒子垂直居中的方法 　　1、先让盒子的上下边缘和父盒子的水平中心线重叠，，然后再让子盒子往回移动自身一半的距离 1 <div class="father"> // 结构 2 <div class="son"></div> 3 </div> 4 /* 通...
盒子水平垂直居中最实用四种方法
swag_12581的博客
05-20 3227
已知宽高的方法(使用定位) 1.子元素必须绝对定位 2.子元素四个方向的对立方向数值相同（都为0） 3.再给子元素加 margin:auto 可以让子元素在父元素中水平垂直居中 .login { width: 100px; height: 100px; /* 绝对定位 */ position: absolute; /* 四个方向都为0*/ top: 0; right: 0; bottom: 0; right: 0; ..
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
前端基础总结--CSS
chenyouleww的博客
07-08 687
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
设计一个网站的服务条款页面通常涉及编写HTML结构来布局内容，并使用CSS来美化页面
BLOG域名:programb.blog.youkuaiyun.com
07-03 1805
设计一个网站的服务条款页面通常涉及编写HTML结构来布局内容，并使用CSS来美化页面。
CSS盒子居中的常用的几种方法(小结)
11-21
第一种： 用css的position属性 <style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { width: 40px; height: 40px; background-color: red;
css实现盒子的水平垂直居中的三种方法
ryyzxf的博客
08-31 612
css实现盒子的水平垂直居中的两种方法方法一方法二方法三 方法一 1.当使用position定位，margin-top、margin-left水平垂直居中时，先利用top:50%、left:50%将子盒子的左上角定位到父盒子的正中，然后使用margin-top:50%;margin-left:50%,完成。 //HTML、css <style> /* * { padding: 0; margin: 0; } *//*去掉所有元素内外边距
让盒子水平垂直居中的三种方法(面试可能会问到)
weixin_46682277的博客
12-23 1015
第一种方法(可以细分出来3个小方法)： 第一个小方法 设置好子绝父相 left:50%;top:50%; margin-left:子盒子负的自身宽度的一半;margin-top:子盒子负的自身高度的一半; 第二个小方法 设置好子绝父相 left:50%;top:50%; transform:translate(-50%,-50%); //表示自身宽高的50% 第三个小方法 设置好子绝父相 left:0;top:0;right:0;bottom:0; margin:auto; 第二种方法flex布
盒子几种居中的方法
qq_44902858的博客
11-29 7759
水平居中 方法一：给div设置宽度后将margin的上下设为0，左右设为auto <div class="box"></div> body{ margin: 0; padding: 0; } .box{ width: 300px; height: 200px; background-color: aqua; margin: 0 auto; } 效果： 方法二：使小盒子
盒子居中的几种方式
weixin_54018434的博客
04-08 257
将父元素的 display 属性设置为 table ，子元素的 display 属性设置为 table - cell ，然后使用 vertical - align: middle 实现垂直居中，配合 text - align: center 实现水平居中。父元素相对定位，子元素绝对定位，通过 left: 50%;将父盒子设置为相对定位，子盒子设置为绝对定位，然后将子盒子的 top 、 left 、 right 、 bottom 都设为0，并设置 margin: auto。
盒子居中的几种方法
qq_45739639的博客
05-20 1969
盒子居中的几种方法 拿下面的例子来说 1. 绝对定位 + 变换移动 .box{ position: relative; width: 300px; height: 300px; background-color: pink; } .box>div{ position: absolute; left: 50%;
盒子水平居中的几种方案
huyuehuyuehu的博客
12-14 347
盒子水平居中的几种方案 这种需求在我之前的项目当中是非常常见的刚开始的时候我是用position定位的方式来实现的，后来随着css3的兴起，display:flex的方式尤其是在移动端开发的时候来实现它是非常强大的，然后有一段时间我在看博客的时候发现display:table-cell的方式虽然不常用但是也可以实现，当然还有position+calc计算的方式，js方式，grid网格布局方式都可以实现 定位三种 定位一： absolute + 负margin(子盒子宽高的一半)（一定要知道子元素的宽高） .
让一个盒子垂直水平居中总结
Cool_so_cool的博客
10-02 674
如何将一个div盒子水平垂直都居中？ <div class="parent"> <div class="child"></div> </div> <style> .parent{ width:500px ; height:500px ; border: 1px sold red } .child{ width :100px; height:100px;
​ 如何使一个盒子水平垂直居中 ​
最新发布
07-31
我们被要求总结CSS中实现元素水平垂直居中的方法。根据引用，我们可以总结出多种方法。注意，用户的问题是实现盒子的水平垂直居中，因此我们需要整理各种适用的技术。 引用中提到了至少6种方法，包括： 1. 使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值