让盒子绝对居中的办法

最新推荐文章于 2024-06-02 17:14:20 发布
最新推荐文章于 2024-06-02 17:14:20 发布
阅读量3.8k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cathei/article/details/80589919
版权
让一个盒子绝对居中的方式： position：absolute；
left：0；
right：0；
top：0；
bottom：0；
margin：auto；

因为设置了盒子向左距离零向右距离零，这是无法达成的，因此设定margin左右为auto，该盒子的位置就会按照左右自动居中的方式水平居中。垂直居中亦是如此。

ChericeYang
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现盒子居中的5种方式
huangyuting98的博客
02-24 5650
实现盒子居中的5种方式
html 7种盒子绝对居中方式+文字绝对居中
qq_58232957的博客
10-11 5333
绝对居中（flex） : （flex居中）公用标签： <div class="container"> <div class="cube"></div> </div> 方式一： .container{ width: 600px; height: 600px; border:1px solid red; /* 这一步...
3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）
最新发布
m0_73560798的博客
06-02 1325
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
盒子居中常用方法
风向决定发型的博客
07-22 4495
大家都知道，不管是在平常布局中还是在面试当中都会遇到让一个盒子水平且垂直居中的情况，在这里总结了几种常用的居中方法： 1、绝对定位居中（最常用、好用） 2、负margin居中（传统方法） 3、margin固定宽高居中 4、flex居中 5、transform居中 6、table-cell居中 7、不确定宽高居中（绝对定位百分数） 以下例子中使用的基础结构如下 <div class="box"> <div class="chl_box"> </div> <
盒子居中的三种方法(最简单）
qq_46034942的博客
02-16 2万+
1.利用定位（子绝父相）、margin-left、和margin-top实现 子盒子相对于父盒子进行移动。在父盒子内，先移动父盒子宽的一半，再移动父盒子高的一半。此时的子盒子在父盒子的偏右下的位置，再次需要移动子盒子，将子盒子向左移动自身宽度的一半，再向上移动自身高度的一半。 缺点在于如果修改了子盒子的宽高，则就需要修改margin-left和margin-top的值 .father { /* 给父盒子设置相对定位 */ position: rel
当position为absolute时，盒子如何居中定位
weixin_44988028的博客
09-02 1443
样式： 1、页面居中 position: absolute; left: 0; right: 0; top:0; bottom: 0; margin: auto; 2、垂直居中 position: absolute; top:0; bottom: 0; margin: auto; 3、水平居中 position: absol...
固定宽高的DIV如何绝对居中
09-25
在网页设计中，让一个具有固定宽度和高度的 `DIV` 元素绝对居中是一项常见的需求。这里的“绝对居中”意味着无论浏览器窗口大小如何变化，该元素都将始终保持在屏幕或其容器的中心位置。要实现这个效果，通常会结合...
Web开发中盒子居中的几种方法
09-22
主要为大家详细介绍了Web开发中让盒子居中的8种方法，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下
控制DIV中文字绝对居中的简单方法
09-25
在网页设计中，让元素居中对齐是一项常见的需求，特别是在布局和排版时。`div` 是HTML中一个非常重要的块级元素，通常用来构建页面结构。在本篇文章中，我们将探讨如何使用 `line-height` 属性以及其它CSS技巧来实现...
元素及文本的水平居中/垂直居中/绝对居中总结
09-25
简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦
让子盒子在父盒子中垂直居中的五个方法
01-08
一、用padding实现 1.padding-top = (父盒子的高度 – 子盒子的高度) / 2 ... /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */ .dad { /* 300-75=225 */ width: 225px; /* 300-100=200 */
总结盒子居中的常用方法
qq_44473483的博客
07-23 4461
让元素居中是每个前端都会经历的一个问题，而解决该问题的方法也各不相同，各有长短，今天总结下所知晓的方法，并分析利弊。 基础代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>订阅发布</title> <style> .bigBox { width: 500px; height: 500px; backg
如何使一个盒子水平垂直居中？（5类8种）
weixin_50517811的博客
11-03 2071
如何使一个盒子水平垂直居中？flex布局/grid布局/position布局/table布局/line-height
盒子居中（常用的方法）
tianxia1202的博客
12-15 3801
想必大家都知道，盒子居中不论在项目中还是在面试题中都是常见的对吧！今天我主要分享四种方法，希望对各位同学有一定的帮助。 场景： 假如这里有一个父盒子（parent），子盒子（child），我们需要得到的结果是让子盒子相对父盒子居中，也就是说子盒子在父盒子中居于中间的位置。 ，以便于大家更好的理解。盒子居中一般有两种类型， 1.宽度和高度已经确定的。 2.宽度和高度未确定的。有四种解决方案：
盒子水平垂直居中常用的六种方法
Angel_Tears_的博客
08-09 8852
盒子水平垂直居中常用的六种方法,在写前端代码的时候,我们经常用到盒子的水平垂直居中,这里说的水平垂直居中都要有一个参照物,也就是子盒子相对于父盒子的水平垂直居中,方法一:利用定位 父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50% 有时候,要实现一些元素水平垂直都居中,这部分元素呢,可能大小未知,例如一些图片或者一些未知大小的块元素,margin:auto会
盒子几种居中的方法
qq_44902858的博客
11-29 7661
水平居中 方法一：给div设置宽度后将margin的上下设为0，左右设为auto <div class="box"></div> body{ margin: 0; padding: 0; } .box{ width: 300px; height: 200px; background-color: aqua; margin: 0 auto; } 效果： 方法二：使小盒子
CSS盒子居中的几种方法
热门推荐
大灰狼的小绵羊哥哥的博客
08-25 4万+
1.第一种 利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30 div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30 按 Ctrl+C 复制代码 demo .div1{ wi
html常见盒子居中小结
a785975139的博客
12-04 4万+
html常见盒子居中小结     在写界面时，经常被元素居中的问题困扰。经过一番查阅资料和摸索，鄙人实践出了一套常见元素居中的办法，现在记录下来，以便日后参考。     元素在标准文档流和非标准流中的表现有所不同，所以居中方法也要分开来进行说明。     一、标准文档流 标准文档流里，元素被分为块级元素和行内元素。常用的块级元素有div、h1~h7、li等，它们能够设置宽和高；如果不显示设
绝对定位的盒子居中
bloom的专栏
10-31 1857
今天学习了一个非常实用的css如下： div{ width: 600px; height: 60px; background: #13ce66; position: absolute; left: 50%; top: 0; margin-left: -300px; /*组件真实宽度的一半 这里是600的一半*/ } 当作公式记录下来，就是...
绝对定位的盒子水平居中
09-04
绝对定位的盒子水平居中可以通过设置left属性为50%，并且使用负的margin-left值将盒子向左移动自身宽度的一半来实现。具体来说，可以给父盒子添加相对定位，并设置宽度。然后给子盒子添加绝对定位，并设置宽度。最后，使用left属性设置为50%，并且使用负的margin-left值为子盒子的宽度的一半，来实现盒子的水平居中。以下是一个示例代码： ```css .father { position: relative; /* 给父盒子添加相对定位 */ height: 400px; width: 600px; background-color: aquamarine; margin: 0 auto; /* 水平居中 */ } .son { position: absolute; /* 给子盒子添加绝对定位 */ width: 300px; height: 200px; background-color: bisque; left: 50%; /* 让子盒子水平居中 */ margin-left: -150px; /* 将子盒子向左移动自身宽度的一半 */ } ``` 通过以上代码，可以实现绝对定位的盒子在父盒子内水平居中。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [使用绝对定位实现盒子水平居中](https://blog.csdn.net/weixin_47477471/article/details/128519702)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS-----绝对定位盒子水平居中](https://blog.csdn.net/wode39/article/details/126222174)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值