position:absolute和margin：auto 连用实现元素水平垂直居中

资料来源：网络整理时间：2023/2/14 0:48:07 共计：3615 浏览

有时候，要实现一些元素水平垂直都居中，这部分元素呢可能大小未知，例如一些图片或者是一些未知大小的块元素。

利用绝对定位可以将要居中的元素脱离文档流.

 position: absolute;
 left:0px;
 right: 0px;
 top:0px;
 bottom: 0px;

但他的父元素要设成相对定位

position: relative;

这样设置完成后会发现子元素并没有居中。这是因为虽然脱离了文档流但是top的bottom的值是相等的。根据优先级会自动向上对齐。同理左右也是如此。

这时在要居中的元素中加上

margin:auto;

margin:auto会自动去计算子元素和父元素之间的边距，并设为居中。所以就会实现上下左右都居中。

那么还有一个问题，既然居中是有margin：auto来计算实现。为什么还需要将元素设为绝对定位呢？

这是因为margin：auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说，margin：auto和margin：0 auto 在一般情况下没有区别，不能实现垂直居中。

但是有了绝对定位后，margin-top和margin-bottom 的值就不是0了，也是通过计算所得。所以能实现垂直居中。

最后，发出完整的css类

.center{ position: absolute; left:0px; right: 0px; top:0px; bottom: 0px; margin:auto; background: pink; text-align: center; vertical-align:middle;
    }

晚安，世界

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：css如何实现图片在div中垂直居中 | ·下一条：幻灯片插件-jquery.sliderPro.min.js