今天小编跟大家讲解下有关CSS3 不定高宽垂直水平居中的几种方式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3 不定高宽垂直水平居中的几种方式 的相关资料，希望小伙伴们看了有所帮助。
1、flex布局
.father { display: flex; justify-content: center; align-items: center;}这种方式兼容性不好
2、position + transform
.son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}IE9以下不支持transform属性
3、table + table-cell
.father { display: table;}.son { display: table-cell; vertical-align: middle; text-align: center;}4、:before + display:inline-block
.father { text-align: center;}.father::before { content: ''; display: inline-block; height: 100%; vertical-align: middle;}.son { display: inline-block;}到此这篇关于CSS3 不定高宽垂直水平居中的几种方式的文章就介绍到这了,更多相关CSS3 不定高宽垂直水平居中内容请搜索爱蒂网以前的文章或继续浏览下面的相关文章 希望大家以后多多支持爱蒂网！
来源：爱蒂网
