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 不定高宽垂直水平居中内容请搜索移动技术网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持移动技术网!
如对本文有疑问, 点击进行留言回复!!
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
网友评论