绝对定位后，margin：0 auto；不能使用的问题

最新推荐文章于 2024-06-12 12:14:48 发布
最新推荐文章于 2024-06-12 12:14:48 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 遇到的问题 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44759795/article/details/106467018
版权
在CSS布局中，当元素使用绝对定位后，`margin: 0 auto;`通常无法实现水平居中。文章探讨了这一问题，并提出通过结合使用`position`和适当计算外边距来达到居中效果的方法。
摘要由CSDN通过智能技术生成

1、使用margin:0 auto;实现

在进行盒子模型居中时，通常采用下列代码进行：

.box{
   width:100px;height:50px;border:1px solid red;margin:0 auto;}

在这里插入图片描述

2、利用position和margin结合居中

当给盒子模型增加position属性

最低0.47元/天 解锁文章
哔哔嘎嘎
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
CSS之“绝对定位”的盒子使用margin:0px auto；不能实现水平居中的解决方案
鸭绒的博客
07-09 2559
在盒子实现水平居中的布局中，我们经常直接使用margin:0px auto;来实现居中，在很多时候的确可以一句这样的代码就实现了，但在绝对定位的盒子中，这是不起作用的。 1.根据代码测试是否真如上面所说： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width.
为什么absolute定位会使margin:0 auto 失效？
qq_45633169的博客
05-15 415
https://segmentfault.com/q/1010000039905826
【乔二参】margin: auto详解
最新发布
2302_79483741的博客
06-12 719
在 CSS 中是一个常用的技巧，用于在块级元素（block-level elements）上实现水平居中。：如果元素的宽度是auto（即根据内容自动调整宽度），则不会使其居中，因为它没有一个固定的宽度来确定左右外边距应该是多少。auto实际上是的简写，分别对应上、右、下、左的外边距。但为了实现水平居中，通常只需要将左右外边距设置为auto。：元素需要有一个包含块（通常是父元素）来确定其可用的水平空间。如果父元素的宽度是auto。
解决使用绝对定位absolute后，margin：0 auto居中方法失效
热门推荐
qq_40678503的博客
09-20 1万+
我们都知道，当给一个块级元素设置宽度后，使用margin:0 atuo可以实现水平上的居中。 margin:0 auto的理解是，上下边距为0，左右边距为auto（auto是自动调整大小） 在浏览器中div如果没有设置宽度，那么宽度自动为浏览器的宽度，这是给div设置宽度后，div会靠左显示，margin:0 atuo就是为了填充右侧的空白空间。 但是&lt;img&gt;当不设置宽度时，不会块级...
绝对定位的盒子设置margin-right为什么不起作用？
m0_48270515的博客
08-25 2019
.test1{ position: absolute; width: 100px; height: 100px; background-color: pink; left: 50%; margin-left: -100px; } ```这里盒子的左边框先相对于浏览器的左边偏移50%（ left: 50%;） 再相对于浏览器的左边走-100px （ margin
使用absolute定位，再使用margin 不生效，换成left，right就好
m0_49471668的博客
11-29 446
position:absolute; overflow: hidden; top:242px; left: 10px; right:10px;
在IE下，当margin:0 auto;无法使得块级元素水平居中时
11-30
例如，如果`.wrap`元素内部有其他浮动元素或使用了绝对定位，那么`text-align`方法可能会失效。此时，可以考虑使用其他居中策略，如： 1. 使用Flexbox布局： ```css .wrap_parent { display: flex; justify-...
IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
09-25
在IE6和IE7浏览器中，存在一个与CSS布局相关的特殊问题，特别是在处理绝对定位（position:absolute）元素和其相邻元素的margin时。这个问题是由于这些老版本的Internet Explorer对CSS标准实现的不完善导致的。本文将...
css布局绝对定位下margin失效的解决方法
09-25
绝对定位层下margin:auto会失效，这时设置left:50%，然后margin-left的值为层的宽度的一半，就可在达到margin:auto的效果
使用绝对定位+负外边距让DIV层水平垂直居中页面
12-02
传统的CSS方法，如使用`margin: 0 auto;`可以轻松实现水平居中，但垂直居中却较为复杂。这里我们将详细探讨如何利用绝对定位和负外边距来实现一个DIV层在页面中的水平垂直居中，并考虑窗口大小变化时的动态调整。 ...
css中子元素设置margin-top为什么影响了父元素
12-11
本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： ... margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } .show h2{ margin-top: 50px; cursor:
CSS 问题 Margin内层DIV 不管用 Position用法
weixin_30762087的博客
08-22 112
一 内层Div的margin属性不好用 Margin 属性：在外层次DIV设置了宽度，高度时，内层div使用margin属性不管用； 原因：外层DIV设置了宽度，高度，内层DIV 无意间给撑开了。 解决方法：在外层div中使用overflow：hidden；把浮动出来div隐藏掉 二 Position 的用法 我们平时用的Position一般用于元素的绝对定位： ...
绝对定位+margin auto垂直居中引发的思考
qq_38164763的博客
06-10 1007
占
定位（定位模式和边偏移）
qq_52301431的博客
03-31 2560
定位 （1）为什么要定位？ 第一幅图：红色的小方块可以在图片上移动。 第二幅图：左右箭头可以切换图片 （3）头部悬浮不动 （2）元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分 边偏移 边偏移属性 描述 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 top 顶端偏移量，定义元素相对于其父元素上边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧.
CSS案例之奔跑的北极熊
weixin_45336716的博客
09-02 734
源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit..
实操解决position:absolute之后margin:auto失效的问题
facial_123的博客
03-09 2762
实操解决绝对定位之后margin：auto失效的问题（亲测有效） 前言 最近在学习前端 HTML和 CSS的过程中，遇到了一个问题，那就是将一个div元素（内含文本）利用 position:absolute 属性设置为绝对定位之后，想再对整个元素进行依照设备的水平居中便很难了，也就是说属性及其值：margin:10px auto; 已经失效了，正如下面所示： 一、问题重现 可以看到，在下面的HTML代码中，我定义了一个div元素，并且里边包含了文本，如下所示： <!DOCTYPE html> &
html5css3重点5：translate和margin分别实现盒子水平垂直居中(采用定位的方法实现水平垂直居中)
小黄呀呀呀的博客
05-18 454
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>
不可通过margin:0auto实现水平居中的有那些标签
05-01
2. 绝对定位元素（absolute positioned elements）：绝对定位的元素脱离文档流，不受父元素的限制，所以无法使用 margin: 0 auto 属性来居中。 3. 浮动元素（float elements）：浮动元素会脱离文档流，不占据整行的...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值