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

发布时间：2021-12-10 10:59:31 阅读：277 作者：柒染栏目：大数据

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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

margin概念

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

margin的top和bottom属性对非替换内联元素无效，例如span和 code。

为什么能实现垂直居中

块状水平元素，如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为什么可以实现垂直居中，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

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

为什么能实现垂直居中

实现垂直居中代码

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签