CSS margin：auto 说明

最新推荐文章于 2024-07-06 23:20:22 发布
最新推荐文章于 2024-07-06 23:20:22 发布
阅读量232 收藏
点赞数 2
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TrainTu/article/details/138217986
版权

含义
margin:auto 计算元素对应方向应该获得的剩余空间大小

填充规则
(1) 如果一侧定值，一侧auto，则auto为剩余空间大小
(2) 如果两侧均是auto，则平分剩余空间

场景：
(1) margin-left:auto代替float:right实现右对齐
(2) magin:atuo配合绝对定位实现水平和垂直方向居中

参考：margin:auto你真的理解么？ - raindi - 博客园 (cnblogs.com)

TrainTu
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css margin:0 auto居中
09-25
`margin: 0 auto` 是一个常见的CSS技巧，用于实现块级元素在父容器中的水平居中对齐。这个方法主要适用于固定宽度的元素，并且在现代浏览器中表现良好。我们将深入探讨这一概念，以及如何解决不同浏览器之间的兼容性...
CSS margin:auto
qq_43751465的博客
07-28 770
margin:auto 的填充规则 margin的’auto’可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。 但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。 （1）如果一侧定值，一侧auto，则auto为剩余空间大小。 （2）如果两侧均是auto，则平分剩余空间。 margin：auto为什么只能实现水平居中，不能实现垂直居中 块级元素即使设置了宽度，也会占满一行 是因为默认的宽度规则是
css margin:auto的使用
weixin_43294560的博客
12-09 5120
块级元素使用margin:auto水平居中: div { width: 200px; height: 200px; margin: 0 auto; } 块级元素margin:auto不能垂直居中的原因: 在 display: block 中，如果 margin-left 和 margin-right 都是 auto，则它们的计算值相等，从而导致元素的水平居中。( 这里的计算值为元素剩余可用剩余空间的一半) 而如果 margin-top 和 margin-bottom 都是
css margin属性 auto,css中margin:auto属性的使用方法
weixin_36075657的博客
08-03 5851
css中margin:auto属性的使用方法发布时间：2020-06-25 10:53:17来源：亿速云阅读：221作者：Leah今天就跟大家聊聊有关css中margin:auto属性的使用方法，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。我们都知道使用margin:auto可以让元素水平居中的。但你有没有想过使用margin:auto可以...
【CSS】margin:0 auto;——使用条件/应用场景/不生效无效果的原因
热门推荐
weixin_39068791的博客
06-09 6万+
margin:0 auto；在不同场景下生效条件如下：         块级元素：给定要居中的块级元素的宽度。         行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）         行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）   ...
通过css属性margin:auto让Div中的Table居中
09-25
在div标签中加入text-align:center里面的Table是不会居中的，在Table中加上 margin:auto就可以实现居中效果，下面有个示例，大家可以参考下
无法居中,margin:0 auto;属性
09-25
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小...
CSS中margin:auto;是如何工作的
一起的远方的博客
02-21 6916
margin:auto;在块级元素的水平居中上经常被使用的。但是你有没有想过它是如何工作的以及为什么不能使？要回答这个问题，我们首先需要看一下margin:auto;的工作原理。 auto会因为所在元素、元素类型和上下文的有不同不一样的表现。但是在margin（外边距）中，auto只有两种选择：占据可用的空间（take up the available space）或者等同于0px。这就决定了元素...
使用css做一个旋转的八卦图
weixin_40923558的博客
07-02 349
【代码】使用css做一个旋转的八卦图。
CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
朝阳39的博客
07-06 698
idCSS 样式选择器，用于选中页面中的 html 元素，以便添加 CSS 样式。
Tailwind CSS是什么？
学以致用 知行合一
07-04 365
定义：Tailwind CSS是一个高度可定制的低级CSS实用程序类集合，用PostCSS编写，旨在通过JavaScript进行定制。它提供了一系列基础工具类，允许开发者通过组合这些工具类来快速构建页面和UI。起源：Tailwind CSS最初由Adam Wathan等人于2017年11月1日在GitHub上作为开源项目发布。随着时间的推移，它逐渐成长为一个成熟且流行的CSS框架。
使用css，让div消失在视野中的方法
博哥的二进制世界
07-03 304
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；
[Vue3 + TS + Vite] CSS穿透
qq_45831414的博客
07-03 344
Template中</div>CSS中/*上 右 下 左*//*上 右 下 左*/</style>设置elementPlus抽屉组件的header样式。
WebKit与CSSOM视图模块：探索现代Web布局的协同进化
2401_85760095的博客
07-01 426
CSSOM视图模块为开发者提供了一组丰富的API，用于直接与页面的CSS属性进行交互，实现动态样式的修改和计算。WebKit对CSSOM视图模块的支持为开发者提供了强大的工具，以实现动态和响应式的Web设计。通过本文的学习，你现在应该能够理解CSSOM视图模块的基本概念和用法，并能够将它们应用到你的Web开发项目中。CSSOM视图模块定义了一组操作和访问CSS布局信息的API，这些API允许开发者以编程方式读取和修改元素的样式，以及计算元素的尺寸和位置。
css实现一个三角形
qq_43692768的博客
07-01 189
实现不用方向的三角形。
CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
最新发布
朝阳39的博客
07-06 590
像素 pixel 的缩写，即电子屏幕上的1个点，以分辨率为 1024 * 768 的屏幕为例，即水平方向上有 1024 个点，垂直方向上有 768 个点，则即表示元素的宽度撑满整个屏幕。随屏幕分辨率不同，1px 的大小也不同，所以严格来说，px 也是相对单位，但不考虑屏幕分辨率时，也可以把 px 当作绝对单位来看待。
vue css 链式布局模式
qq_27806371的博客
07-04 147
vue css 链式布局模式
margin：auto
08-24
margin:auto 是一种CSS属性，用于设置块级元素的外边距，并将其水平居中。当 margin:auto 应用于一个块级元素时，它会自动计算并设置左右边距，以使元素在父元素中水平居中。 例如，如果将 margin:auto 应用于一个具有固定宽度的块级元素，它将在其左右两侧分配相等的外边距，从而使元素在水平方向上居中。 这种方法常用于居中容器或居中元素。但请注意，margin:auto 只能在具有确定宽度的块级元素上使用，而对于浮动或绝对定位的元素可能无效。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值