CSS之关于MARGIN居中

最新推荐文章于 2024-02-18 14:54:27 发布
最新推荐文章于 2024-02-18 14:54:27 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： WEB前端 文章标签： CSS MARGIN 居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/netuser1937/article/details/54943015
版权
margin:0 auto; 
这个等价于 margin:0 auto 0 auto; 
也等价于 margin-top:0;  margin-right:auto;  margin-bottom:0; margin-left:auto; 
auto就是左右边距为自动，就是居中的属性，0就是上下边距0。
顺序依次是 上，右，下，左。
相思比梦长
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css margin:0 auto居中
09-25
`margin: 0 auto` 是一个常见的CSS技巧，用于实现块级元素在父容器中的水平居中对齐。这个方法主要适用于固定宽度的元素，并且在现代浏览器中表现良好。我们将深入探讨这一概念，以及如何解决不同浏览器之间的兼容性...
margin 实现水平居中，垂直居中
lucky__peng的博客
03-04 7627
首先了解下，margin的auto属性的作用是用来分配剩余空间，所以对于有剩余空间的元素才有效哦（块及元素）。比如图片设置margin: 0 auto是无效的，因为图片是内联元素，不是占一整行，没有剩余空间。 1.块及元素水平方向居中： 原理：两侧auto，则平分剩余空间，相当于水平居中。 div { margin-right: auto;  margin-left: auto;...
外边距设置居中HTML,margin水平居中 关于margin的居中问题
weixin_42327291的博客
06-04 2457
margin 水平居中 CSS#sm { margin-left: auto; margin-right: auto;} #sm ul,#sm li { float首先新建一个HTML文件，命名为test.html。为了测试出明显的效果，在test.html使用div定义了一个带边框的模块，里面放一个p标签。使用margin设置p标签的左外边距。主要使用margin-left的方法定义左外边距的样...
margin 实现水平居中，垂直居中原理
热门推荐
shizhan1881的专栏
05-10 6万+
水平居， 居右，垂直居中方法及原理。
[HTML-Margin]margin设置为auto实现水平垂直居中
cqjerev的博客
03-09 6382
auto表示自动填充剩余空间。我们可以用来实现水平和垂直居中。
你不知道的margin:auto居中原理
1900's 88 keys的博客
10-16 4242
目录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值来调整居中位置
09-25
主要介绍了CSS中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下
ie css margin auto 不居中解决方案
09-25
在将居中显示时，使用css：#main {margin:0 auto;width:400px;} 此css在firefox下是好的，但是在ie下不起作用。于是开始搜索整理了一下，晒出来和大家分享一下，有需要的朋友可以参考下
使用css实现div垂直居中的示例
09-25
本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...
margin水平垂直居中引发的思考
IshidaYoshiyama的博客
11-25 80
稍微深入的聊一下关于margin实现水平垂直居中背后的原理，后面有一个原生的手搓弹窗效果
CSS排版DIV的“margin”属性常见布局技巧垂直居中对齐，左上角，左下角，右下角，右上角对齐方式的实现
飙歌的博客
10-24 1万+
margin的值类型有：auto | length | percentage percentage：百分比是由被应用box的containing block margin的默认值为0，并且margin支持负值。 margin可以用来同时指定box的四边外边距。如果属性margin有四个值，那么值将按照上-右-下-左的顺序作用于四边，按顺时针的顺序围绕元素。 表达式如下： margin：top right bottom left； 四个数值中间以空格分隔。效果等同于： margin...
【前端】用margin解决居中问题
最新发布
qq_63135173的博客
02-18 325
【前端】用margin解决居中问题
CSS利用margin属性使整个页面居中
OrangeJ
06-29 4625
使用一个包裹层将页面主题包裹起来，设置width和margin就可以使整个页面居中。 width是页面内容区的宽度，margin是外边距，将左右外边距设为auto后，变可以自动计算左右外边距导致页面居中。 * {padding: 0;margin: 0;} .box1 {background-color: red;height: 150px;} .box2 {ba
CSS 使用margin属性 得到的居中效果
code^_^熊的博客
04-02 577
左右居中： margin: 0 auto; 注意：可以让 div标签 线条区域(< div style="border: 1px solid red; opacity: 0.5;"></div>) 等等进行居中
html中margin居中样式,利用margin属性将一个div水平居中将
weixin_30232185的博客
06-15 1866
div+css，图片怎么设置在DIV中垂直居中？图片大小不固定，想让图片自动垂直居中，应该怎么设置？想实现类似在表div+css，图片设置在DIV中垂直居中: 方法一： 思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。 结构如下： CSS样式如下： div {width:300px; height:150px; background-color:#...
margin 属性以及居中
爪蛙 Today is well worth effort
04-13 317
如何使DIV居中主要的样式定义如下：body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARG...
html -- 使用margin实现块元素的水平居中效果
sanjiaowuhuan的博客
09-22 659
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height:500px; /*w...
margin 水平居中原理
{ focus : web }
04-01 276
如果要使 一个 div在屏幕上水平居中 ，标准的做法是 margin -left:  auto; margin -right:  auto; 根据css 标准 关于水平格式的属性 ： margin-left ,border-left,padding-left,width,padding-right,border-right,margin-right , 这七个属性的值加在一起必须是...
css用定位 和margin左右居中
06-07
CSS 用定位可以通过设置元素的 `position` 属性来实现。常用的定位属性有 `relative`、`absolute`、`fixed` 三种。 - `relative`：相对定位，元素本身的位置不会改变，但是可以通过设置 `top`、`bottom`、`left`、`right` 四个属性来调整元素相对于原来位置的偏移量。 - `absolute`：绝对定位，元素相对于最近的已定位祖先元素（如果没有已定位的祖先元素，则相对于 body 元素）进行定位，可以通过设置 `top`、`bottom`、`left`、`right` 四个属性来调整元素的位置。 - `fixed`：固定定位，元素相对于浏览器窗口进行定位，可以通过设置 `top`、`bottom`、`left`、`right` 四个属性来调整元素的位置。 下面是一个使用绝对定位实现左右居中的例子： ```html <div class="container"> <div class="box">Hello, world!</div> </div> ``` ```css .container { position: relative; } .box { position: absolute; left: 50%; transform: translateX(-50%); } ``` 在这个例子中，`.container` 元素使用相对定位，`.box` 元素使用绝对定位。`left: 50%` 让 `.box` 元素的左边缘距离 `.container` 元素的左边缘的距离等于 `.container` 元素宽度的一半，这样就把 `.box` 元素的左边缘放到了 `.container` 元素的中间位置。`transform: translateX(-50%)` 通过水平方向上的负偏移量，把 `.box` 元素向左移动了它自身宽度的一半，使得它的中心点正好在 `.container` 元素的中心位置，从而实现了左右居中的效果。 通过 margin 实现左右居中同样也很简单，只需要在元素的样式中设置 `margin: 0 auto` 即可： ```css .box { margin: 0 auto; } ``` 这个例子中，`margin: 0 auto` 把 `.box` 元素的上下边距都设置为 0，左右边距都设置为自动，从而实现了左右居中的效果。注意，这种方式只适用于块级元素，如果要对行内元素进行左右居中，可以给它们的父元素设置 `text-align: center`，然后再把它们自身设置为 `display: inline-block`。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值