大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

margin中auto为什么可以实现垂直居中

本篇文章为大家展示了margin中auto为什么可以实现垂直居中,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

十载的怀柔网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整怀柔建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“怀柔网站设计”,“怀柔网站推广”以来,每个客户项目都认真落实执行。

margin概念

margin属性为给定元素设置所有四个(上下左右)方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是:margin-top,margin-right,margin-bottom和margin-left。指定的外边距允许为负数。

margin的top和bottom属性对非替换内联元素无效,例如spancode

 

为什么能实现垂直居中

块状水平元素,如div元素(下同),在默认情况下(非浮动、绝对定位等),水平方向会自动填满外部的容器;如果有margin-left/margin-right,padding-left/padding-right等,实际内容区域会相应变窄。

当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性就发生了。具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样,含有以下特性:

  • 如果一侧定值,一侧auto,auto为剩余空间大小;

  • 如果两侧均是auto, 则平分剩余空间

因此,margin : auto 可以实现垂直居中。

 

实现垂直居中代码

想要实现垂直方向的居中可以用绝对定位:

div {
       width: 20px;
       height: 20px;
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       margin: auto;
   }

上述内容就是margin中auto为什么可以实现垂直居中,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


分享名称:margin中auto为什么可以实现垂直居中
标题网址:http://dzwzjz.com/article/pghdgj.html
在线咨询
服务热线
服务热线:028-86922220
TOP