CSS margin：auto 说明

最新推荐文章于 2024-06-12 12:14:48 发布
最新推荐文章于 2024-06-12 12:14:48 发布
阅读量286 收藏
点赞数 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
关注
CSS margin:auto
qq_43751465的博客
07-28 853
margin:auto 的填充规则 margin的’auto’可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。 但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。 （1）如果一侧定值，一侧auto，则auto为剩余空间大小。 （2）如果两侧均是auto，则平分剩余空间。 margin：auto为什么只能实现水平居中，不能实现垂直居中 块级元素即使设置了宽度，也会占满一行 是因为默认的宽度规则是
css margin属性 auto,css中margin:auto属性的使用方法
weixin_36075657的博客
08-03 5953
css中margin:auto属性的使用方法发布时间：2020-06-25 10:53:17来源：亿速云阅读：221作者：Leah今天就跟大家聊聊有关css中margin:auto属性的使用方法，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。我们都知道使用margin:auto可以让元素水平居中的。但你有没有想过使用margin:auto可以...
margin: auto;居中
前端精髓
04-29 1万+
有时候，要实现一些元素水平垂直都居中，这部分元素呢 可能大小未知，例如一些图片或者是一些未知大小的块元素。 利用绝对定位可以将要居中的元素脱离文档流. position: absolute; left:0px; right: 0px; top:0px; bottom: 0px; 但他的父元素要设成相对定位 position: relative; 这样设置完成后 会发现子元素并没有居中...
css中margin:auto的使用？
Gravel'step
12-22 3304
login-page： login-form： <body> <div id="login-page" > <div class="login-form"> </div> </div> </body> #login-page { border:1px solid blue; } .login-form { border: 1px solid red; ...
【乔二参】margin: auto详解
最新发布
2302_79483741的博客
06-12 1561
在 CSS 中是一个常用的技巧，用于在块级元素（block-level elements）上实现水平居中。：如果元素的宽度是auto（即根据内容自动调整宽度），则不会使其居中，因为它没有一个固定的宽度来确定左右外边距应该是多少。auto实际上是的简写，分别对应上、右、下、左的外边距。但为了实现水平居中，通常只需要将左右外边距设置为auto。：元素需要有一个包含块（通常是父元素）来确定其可用的水平空间。如果父元素的宽度是auto。
通过css属性margin:auto让Div中的Table居中
09-25
这个问题的解决方法是利用CSS的`margin`属性的`auto`值。接下来，我们将深入探讨这一技术。 首先，我们要理解`text-align:center`的作用。这个属性用于设置元素内文本的水平对齐方式，当应用于`div`这样的块级元素...
css margin:0 auto居中
09-25
`margin: 0 auto` 是一个常见的CSS技巧，用于实现块级元素在父容器中的水平居中对齐。这个方法主要适用于固定宽度的元素，并且在现代浏览器中表现良好。我们将深入探讨这一概念，以及如何解决不同浏览器之间的兼容性...
margin：auto
前端日月明
03-18 2923
很多像我这样的小白会疑惑，为什么块级元素margin：auto；只能水平居中，不能垂直居中?css居中问题怼这里我查了一下，原来是这样的：margin百分比是按照包含块的宽度计算的！且padding比例也是按包含块的宽度计算！ &lt;style&gt; *{ margin:0; padding:0; } div{ width:200px; height:180p...
css margin:auto的使用
weixin_43294560的博客
12-09 5283
块级元素使用margin:auto水平居中: div { width: 200px; height: 200px; margin: 0 auto; } 块级元素margin:auto不能垂直居中的原因: 在 display: block 中，如果 margin-left 和 margin-right 都是 auto，则它们的计算值相等，从而导致元素的水平居中。( 这里的计算值为元素剩余可用剩余空间的一半) 而如果 margin-top 和 margin-bottom 都是
margin:auto的作用
qq_45709232的博客
07-25 1663
margin:auto的水平居中原理
【css】margin:auto的应用
richest_qi的博客
08-07 125
<div class="container"> <div class="content">div.content</div> </div> .container{ width:200px; height:100px; background-color:lightskyblue } .content{ width:100px; height:100px; background-color:lightpin
CSS – margin：auto; - 这个怎么运作
cune1359的博客
07-05 265
使用margin:auto将块元素水平居中是一项众所周知的技术。 但是您是否想知道为什么或如何运作？ 为了回答这个问题，我们首先需要看看margin：auto的工作原理。 另外，如果可以用于垂直居中， auto可以在页边空白处做些什么，以及其他一些问题。 但是首先， auto实际上会做什么？ auto的定义随元素 ， 元素类型和上下文而变化。 边距auto表示两个意思之一：占用可用空间...
CSS中margin:auto;是如何工作的
一起的远方的博客
02-21 7014
margin:auto;在块级元素的水平居中上经常被使用的。但是你有没有想过它是如何工作的以及为什么不能使？要回答这个问题，我们首先需要看一下margin:auto;的工作原理。 auto会因为所在元素、元素类型和上下文的有不同不一样的表现。但是在margin（外边距）中，auto只有两种选择：占据可用的空间（take up the available space）或者等同于0px。这就决定了元素...
css【详解】外边距 margin（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 3909
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
你不知道的margin:auto居中原理
1900's 88 keys的博客
10-16 4707
目录auto值对布局的影响当margin-left、margin-right、width其中margin-left、margin-right为特定值，width为auto当width 为特定值，margin-left 和 margin-right 为 automargin-left 或 margin-right 任意一个为特定值，其余为 auto三个属性均为 auto 通过对外边距的学习，前端攻城狮都会用margin:auto;或者margin: 0 auto;来对页面块级元素居中布局。本文会对其原理解释。
【CSS】margin:0 auto;——使用条件/应用场景/不生效无效果的原因
LINWEI_ya的博客
10-29 1072
margin:0 auto；在不同场景下生效条件如下：         块级元素：给定要居中的块级元素的宽度。         行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）         行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）   ...
html中auto是设置什么的,css中margin：auto什么意思？margin：auto属性的用法详解
weixin_34191434的博客
06-11 9085
我们都知道使用margin:auto可以让元素水平居中的。但你有没有想过使用margin:auto可以让元素水平居中的原因，要回答这个问题，我们首先需要看一下margin：auto的工作原理。auto如果它适用于垂直居中，那么又是一种什么情况，下面我们来看具体内容。首先auto是做什么的？定义auto元素，因元素类型和上下文而异。在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将...
A 文档流布局以及margin:auto的原理
androidioskl的博客
02-10 918
常规流布局 也叫常规流、文档流、普通文档流、常规文档流，浏览器默认的排列方式。将窗体自上而下分成一行行,按照源代码的顺序排列将块级元素从上到下、行内元素在每行中从左至右的依次排放元素,并占据文档一定的空间。 常规流快盒的水平布局规则: 每个块盒的总宽度（margin border padding content加起来），必须刚好等于包含块的宽度,因为要独占一行。 盒模型属性中只有这三个值可以设置auto的值: width、margin-left、margin-right 宽度(width)的默认值: aut
margin：auto 与 margin：0 auto 区别
热门推荐
dkmings的博客
06-13 2万+
margin的重要性： 有个不容置疑的事，前端开发人员没有人能够忽视CSS margin的重要性。CSS coding时，margin的使用频率就如同呼吸般频繁，如果我可以说得夸张点的话。 margin作为CSS盒模型基本组成要素之一，是非常Basis的一个技术手段，所以我想对于它的一些基本情况应该不用太介绍了？ margin经常被用来做什么？ 让块元素水平居中；让元素之间留有舒适的留
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值