使用margin居中时需要注意的事项。

最新推荐文章于 2024-02-04 08:16:46 发布
最新推荐文章于 2024-02-04 08:16:46 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guiasan_/article/details/122124645
版权
在使用margin居中时，常会用到margin：0 auto，可以做到水平。想要垂直居中呢？我们先看看relative的情况。检查元素会发现，他的左右margin是有自动填充的，而上下margin不会。这是为何，在官方解释中是这样说道的——元素的宽会默认的等同于父元素的宽，所以当margin：0 auto时，左右的margin会均分，但是高度不会默认为父元素高度，所以margin：auto = margin:0 auto.那relative定位该如何居中，需要将外边距上下设置为25%。...
摘要由CSDN通过智能技术生成

在使用margin居中时，常会用到margin：0 auto，可以做到水平。想要垂直居中呢？我们先看看relative的情况。

 

检查元素会发现，他的左右margin是有自动填充的，而上下margin不会。这是为何，在官方解释中是这样说道的——元素的宽会默认的等同于父元素的宽，所以当margin：0 auto时，左右的margin会均分，但是高度不会默认为父元素高度，所以margin：auto = margin:0 auto.那relative定位该如何居中，需要将外边距上下设置为25%。

 

可以发现垂直水平居中了，这时你会发现，诶？垂直好像并没有居中啊，为什么会这样？你回想一下re

最低0.47元/天 解锁文章
Guiasan_
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
margin 实现水平居中，垂直居中原理
shizhan1881的专栏
05-10 6万+
水平居， 居右，垂直居中方法及原理。
CSS中使用负margin值来调整居中位置
01-19
如果知道了各个元素的大小，设置等于宽高一半大小的负margin值（如果没有使用box-sizing: border-box样式，还需要加上padding值），再配合top: 50%; left: 50%;样式就会使块元素居中。 需要注意的是，这是按照预想...
Div使用margin居中常见问题
04-30
虽然我们知道在CSS中加margin:0 auto;(意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果，但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。 这往往是由以下两种常见原因引起的： 1、没有设置宽度 2、没声明DOCTYPE
margin 如何居中
weixin_30457551的博客
01-02 136
#id { margin-left: auto; margin-right: auto;width:100px}一定得增加width:100px这一个属性。margin:[N]px auto;width:[N]px;才可以导致对应的元素居中， 单单用margin-left: auto; margin-right: auto;是没办法居中的 转载于:https://www.cnblogs.com/...
CSS之关于MARGIN居中
netuser1937的博客
02-09 1304
CSS之关于MARGIN居中
margin 水平居中原理
{ focus : web }
04-01 279
如果要使 一个 div在屏幕上水平居中 ，标准的做法是 margin -left:  auto; margin -right:  auto; 根据css 标准 关于水平格式的属性 ： margin-left ,border-left,padding-left,width,padding-right,border-right,margin-right , 这七个属性的值加在一起必须是...
css margin:0 auto居中
09-25
在网页设计中，CSS（层叠...在处理浏览器兼容性问题时，可以通过调整`body`的`text-align`属性，或者使用`display`和`margin`组合来实现跨浏览器的居中效果。理解这些概念和技巧，将有助于你在网页布局中更加得心应手。
html中使用margin:0 auto整个页面不居中的解决方法
09-28
需要注意的是，DOCTYPE的选择会影响浏览器的渲染模式，因此在选择DOCTYPE时，应考虑兼容性需求以及页面的结构和样式要求。 在编写HTML或XHTML页面时，始终包含DOCTYPE声明是非常重要的，因为它确保了页面在不同...
使用css实现div垂直居中的示例
09-25
2. 对于需要整体居中的`div`，使用`position: absolute`，并配合`left`、`top`、`margin-left`和`margin-top`来调整元素位置，使其居中。 这种方法适用于知道元素尺寸的情况，如果元素尺寸未知或者需要响应式布局，...
margin 实现水平居中，垂直居中
lucky__peng的博客
03-04 7689
首先了解下，margin的auto属性的作用是用来分配剩余空间，所以对于有剩余空间的元素才有效哦（块及元素）。比如图片设置margin: 0 auto是无效的，因为图片是内联元素，不是占一整行，没有剩余空间。 1.块及元素水平方向居中： 原理：两侧auto，则平分剩余空间，相当于水平居中。 div { margin-right: auto;  margin-left: auto;...
你不知道的margin:auto居中原理
1900's 88 keys的博客
10-16 4323
目录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 实现页面居中
yonbin的专栏
02-03 1085
语法：margin：auto|length参数：auto：值被设置为相对边的值length：由浮点数字和单位标识符组成的长度值或白分比。百分比是基于对象的高度。对于内联对象来说，左右外延边距可以是负值。说明:检索和设置对象四边的外延边距。如果提供全部四个参数值，将按上-右-下-左顺序作用四边。如果提供一个，将用于全部的四边。如果提供两个，第一个将用于上-下，第二个用
CSS基础知识：外边距（margin）块级元素的水平居中 (margin:0 auto；)行内元素的水平居中(text-align:center)
最新发布
我就知道你会来，我们一起进步吧！
02-04 539
上面表示的是上外边距为10px，右外边距20px，下外边距30px，左外边距40px。margin属性用于设置外边距，即控制盒子和盒子之间的距离。margin简写方式和意义与padding完全一致。2.将盒子左右的外边距都设置为auto。注意：上面这种方式只对块级元素生效。行内元素或者行内块元素水平居中给其。
web网页中各种margin布局居中效果 水平居中 垂直居中 水平垂直居中
weixin_30732825的博客
03-14 363
页面中元素居中效果分为三种情况，1.水平居中，2.垂直居中，3.水平垂直居中下面代码视图层统一代码结构：<div class="father"> <div class="son"></div> </div>1.水平居中：应用场景：整体网站居中，文字排版居中css代码：.father{ ...
外边距设置居中HTML,margin水平居中 关于margin的居中问题
weixin_42327291的博客
06-04 2469
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:auto水平居中和垂直居中的原理分析
热门推荐
02-18 1万+
margin属性平时写css几乎天天写，再熟悉不过了！今天我们来深入讨论下margin的一些居中的问题（本来这篇文章早就想写的，一直忘记了），话不多说，直接进入正题！ 1.margin:auto 有人可能要问了，margin:auto 这个有啥好讨论的？先看下小测试的代码！ <style> .auto{ width: 200px; height: 200px; background-color: aqua; margin:
关于 margin :auto的二三点事（水平居中垂直不居中）
qq_45288176的博客
06-16 2047
margin是指块级元素的外边距margin 清除周围的（外边距）元素区域， margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性margin最多有4个值，按顺序为顺时针：上，右，下，左margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）实例： 可以发现 auto使其自动对齐到中间 居中显示结果没有发生变化。why?分析
CSS基础：margin使用&margin居中&margin边框合并
weixin_52854090的博客
10-07 390
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 200px; width: 200px; border: 3px dotted #0000FF; } #div4{ height: 100px; .
div盒子左右居中margin用法
喜东东的博客
08-06 1385
1.使用绝对定位 2.使用 margin：X auto; 注意：盒子的类型是block，且盒子的width必须提前设置好具体值，比如：width = 50px，否则不能左右居中，"X" 不一定为0也可以是具体值，是按需求定的；"auto"代表左右边距自动，这样就会使盒子左右居中 inline-block不适用margin ：X auto； ...
使用margin实现垂直居中
06-07
要使用margin实现垂直居中，可以将要居中的元素的高度设置为固定值，然后使用以下CSS样式： ```css .center { position: relative; top: 50%; transform: translateY(-50%); } ``` 这里的`.center`是要居中的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值