CSS3 不定高宽垂直水平居中的几种方式

.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 不定高宽垂直水平居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!