盒子水平居中的 5 种方式--父子盒子

最新推荐文章于 2025-04-08 11:08:01 发布
最新推荐文章于 2025-04-08 11:08:01 发布
阅读量326 收藏 3
点赞数 1
文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lixiaoqidecsdn/article/details/122304817
版权

1.子绝父相，

top:50%,left:50%,margin-top/margin-left 负的-子盒子宽度的一半；

2.子绝父相

left/top/right/bottom=0，margin=auto;

 3.子绝父相，

top:50%,left:50%, transform:translate(-50%,-50%)

4.flex布局，

diaplay:flex; 水平： justtufy-content:center; 竖直：algin-items：center；

5.grid 网格布局

display:grid; place-items:center;

代码展示：

                                                                             01

                                                                             02

 03

04 

                                                                            05.

eg:效果

礼小七
关注
[HTML] CSS基础教程----解决父子传递的方式，和块元素垂直居中以及cursor的使用
hnspystqxskzlqc的博客
03-30 998
目录 一、解决父子传递 练习一 二、块元素垂直居中 练习二 三、cursor 四、总结 (接上一期知识，咱们继续讲解。) 一、解决父子传递 margin-top传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top值会传递给父元素。 解决方式： 一、给父母设置border边框 二、父级设置padding 三、父级触发BFC 1.overflow：hidden; ...
盒子模型学习-尚硅谷HTML源代码
weixin_58264104的博客
06-30 3693
盒子模型学习-尚硅谷HTML源代码
父子盒子水平居中
qq_42732038的博客
11-27 171
第一种:弹性布局 html： <div class="appOne"> <div class="appTwo"></div> </div> css： .appOne{ width: 100%; height: 700px; overflow: hidden; display: flex; justify-content: center;
HTML-盒子水平居中
热门推荐
weixin_43312083的博客
08-07 3万+
外边距实现盒子居中 可以让一个盒子实现水平居中，需要满足一下两个条件： 必须是块级元素。 盒子必须指定了宽度（width） 然后就给左右的外边距都设置为auto，就可使块级元素水平居中。 实际工作中常用这种方式进行网页布局，示例代码如下： .header{ width:960px; margin:0 auto;} <!DOCTYPE html> <...
盒子居中的几种方式
weixin_54018434的博客
04-08 219
将父元素的 display 属性设置为 table ，子元素的 display 属性设置为 table - cell ，然后使用 vertical - align: middle 实现垂直居中，配合 text - align: center 实现水平居中。父元素相对定位，子元素绝对定位，通过 left: 50%;将父盒子设置为相对定位，子盒子设置为绝对定位，然后将子盒子的 top 、 left 、 right 、 bottom 都设为0，并设置 margin: auto。
(前端)html与css css 14、父子盒模型
weixin_30500473的博客
07-18 399
父子盒模型 子盒子的整体占位不能超过父盒子的内容区域 父盒子的内容区域宽度≥子盒子width+padding*2+border*2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
父子关系盒子居中4种方法
小熊崽崽cc的博客
11-13 465
父子关系盒子居中4种方法哦!
盒子水平居中的方法
weixin_41218855的博客
04-18 698
1、使用margin:0 auto; 2、使用margin左右边距 3、先让盒子左移父盒子的一半，再用变形或者定位把子盒子右移子盒子的一半 4、把盒子换成行内块元素，然后用text-align属性使盒子水平居中 ...
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
CSS笔记(二) - 页面布局 盒子模型
JUN_7777的博客
02-08 2491
行内元素
CSS教程（八）- 盒子模型
Oblning的博客
11-10 1356
css边框，css盒子模型，内边距，css外边距，css内边距，外边距，边框，圆角边框，垂直外边距合并，垂直外边距塌陷，清除外边距，盒子阴影，文字阴影
CSS居中（一）--div盒子水平垂直居中
让优秀成为一种习惯
11-27 1万+
这一部分主要介绍div盒子的水平垂直居中，一种移动端两种PC端。说明：垂直水平居中的盒子的外围可以是一个div盒子（div–div），也可以是整个页面body（body–div）。无论是哪一种，方法都是一样的。本博客以【div–div】的情况介绍。 看效果图，如下： 接下看代码： 先来看统一的html结构:
CSS-盒子水平居中-持续更新
东东爱编码博客
05-12 2453
文章目录一、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实现盒子内部 div水平垂直居中
pinbolei的博客
04-05 4587
总结一下利用css实现垂直居中的几种方法
HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
mrdu_somefun的博客
12-17 4419
最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。 水平居中直接加上标签即可，或者设置margin:auto;当然也可以用下面的方法 下面说两种在屏幕正中（水平居中+垂直居中）的方法 放上示范的html代码： body> div class="main"> h1>MAINh1> div> body>12345 方法一：
css垂直居中
weixin_30664539的博客
02-28 107
.parent{ 　　position: relative; } .child{ position: absolute; top:50%; transform: translateY(-50%); } 1、定位 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -...
如何让一个div盒子水平垂直居中（实现代码如下：）
weixin_43748930的博客
03-27 1992
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
盒子水平居中实现方法
luckypian
06-25 4523
方法一：外边距(margin) 1.必须给盒子设置宽度； 2.盒子设置外边距margin:0 auto。（上下外边距为0） 注:行内元素或行内块元素若想水平居中，给父元素设置text-align:center。 方法二：绝对定位 ①元素水平垂直居中 1. 对该元素设置绝对定位； 2. 设置left:50%; 当前参考物宽度的一半; margin-left: -小盒子宽度的一半； 3. 设置top:50%;当前参考物高度的一半;margin-top:-小盒子高度的一半。 ②元素水平垂直居中 1. 对该元素设置
盒子水平居中
最新发布
05-08
### CSS 实现盒子模型水平居中的方法 #### 使用 `margin: 0 auto;` 这是最常见的水平居中方式之一，适用于已知宽度的块级元素。通过设置左右外边距为自动，可以让子元素在其父容器中水平居中。 ```css .parent { width: 200px; } .child { width: 50px; margin: 0 auto; /* 左右外边距设为auto */ background-color: #26f12d; } ``` 这种方法依赖于 `.child` 元素具有固定的宽度[^4]。 --- #### 使用 Flexbox 布局 Flexbox 提供了一种简单且强大的解决方案来实现水平居中。只需将父容器的 `display` 属性设置为 `flex`，并通过 `justify-content: center;` 来使子元素水平居中。 ```css .parent { display: flex; justify-content: center; /* 子元素水平居中 */ width: 200px; height: 200px; background-color: #000000; } .child { width: 50px; height: 50px; background-color: #26f12d; } ``` 这种方式不需要指定子元素的具体宽度，适合动态内容或响应式设计[^3]。 --- #### 使用 Grid 布局 CSS Grid 是另一种现代布局技术，可以通过 `place-items` 或单独使用 `align-items` 和 `justify-items` 来轻松实现水平居中。 ```css .parent { display: grid; place-items: center; /* 自动完成水平和垂直居中 */ width: 200px; height: 200px; background-color: #000000; } .child { width: 50px; height: 50px; background-color: #26f12d; } ``` Grid 布局同样无需关心子元素的确切尺寸即可实现灵活的居中效果[^3]。 --- #### 使用 `text-align: center;` 如果子元素是行内元素（如 `<span>`），则可以在父容器上设置 `text-align: center;` 来让其水平居中。 ```css .parent { text-align: center; /* 行内元素水平居中 */ width: 200px; height: 200px; background-color: #000000; } .child { display: inline-block; /* 确保 child 是行内块状元素 */ width: 50px; height: 50px; background-color: #26f12d; } ``` 注意：此方法仅适用于行内或行内块状元素。 --- #### 使用绝对定位与 `left: 50%; transform: translateX(-50%);` 对于需要支持较旧浏览器的情况，可以结合 `position: absolute;` 和 `transform` 来实现水平居中。 ```css .parent { position: relative; width: 200px; height: 200px; background-color: #000000; } .child { position: absolute; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; background-color: #26f12d; } ``` 这种方法的优点在于它既兼容旧版浏览器又能够适应未知宽度的子元素[^2]。 --- ### 总结 以上介绍了几种常见的 CSS 技术用于实现盒子模型的水平居中，每种方法都有各自的适用场景： - 如果目标设备支持最新的标准推荐优先采用 **Flexbox** 或者 **Grid Layout**； - 对于传统项目或者特殊需求可以选择基于 **Margin Auto**, **Text Align Center**, 或者 **Position Absolute + Transform** 的方案。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值