css 脚本中margin:auto起什么作用呢?


摘要:
下文讲述margin:auto关键字的用法简介,如下所示:

在css脚本编写中,我们常常使用margin:auto让元素水平居中那么margin:auto到底是如何让html中的元素处于水平居中的呢?
下文将举例讲述margin:auto的具体原理,如下所示:

margin:auto功能

margin:是定义html元素的外边距;
margin:auto时浏览器计算外边距,当margin定义为auto时,将占用可用空间或0px 。
margin:auto时浏览器会自动分配左右边距,使元素平均分配占用父级容器的左右边距,达到元素居中的目的

例:

    <title>猫猫教程(www.maomao365.com)之元素水平居中的举例说明</title>
   <style type="text/css">
 #divMain {
  margin: auto;
  width: 300px;
  height: 125px;
  background-image: linear-gradient(45deg, #84ECEF 10%, #F8F62F 60%, #FDC018);
}
#divSub {
  margin: auto;
  color:white;
  height: 50px;
  width: 50px;
  background: #1F1D20;
  background-image: linear-gradient(#757575 1px, transparent 1px), linear-gradient(90deg, #757575 1px, transparent 1px);
  background-size: 25px 25px;
}
   </style>

 </head>
 <body>
  

<div id="divMain">
   <div id="divSub">
   
  </div>
 </div>
 
   /*
    从以上的例子我们可用看出
	divMain 定义了 margin:auto 相对于body则居中显示
    divSub 定义了 margin:auto 相对于divMain则居中显示
   */
 


注意事项:
只需将左右边距设置为auto,那么元素就相对于父级处于居中显示状态,
那么
margin:***px auto和margin:auto及 margin:*px auto *px auto
三种写法都可实现居中显示元素