css宽高不固定实现居中的方法-创新互联

这篇文章主要介绍了css宽高不固定实现居中的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

10年积累的成都网站设计、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先建设网站后付款的网站建设流程，更有灵武免费网站建设让你可以放心的选择与我们合作。

css宽高不固定实现居中的方法：1、利用flex进行布局实现居中；2、使用css3中transform进行元素偏移；3、利用table-cell实现居中即可。

css宽高不固定如何实现居中？

方法1：利用flex进行布局

大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的选。


    horizontal and vertical

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; } .flex-center { display: flex; justify-content: center; align-items: center; }

利用到了 2 个关键属性：justify-content 和 align-items，都设置为 center，即可实现居中。

需要注意的是，一定要把这里的 flex-center 挂在父级元素，才能使得其中的子元素居中。

方法2：使用position+transform

主要使用了css3中transform进行元素偏移，效果非常好

这方法功能很强大，也比较灵活，不仅仅局限在实现居中显示。兼容方面也一样拿IE来做比较，第二种方法IE8以上都能使用。 IE8及IE8以下都会出现问题。


    
        div被其中的内容撑起宽高

horizontal and vertical

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: table-cell; text-align: center; vertical-align: middle; }

网站建设知识