最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3不定高宽垂直水平居中的几种方式代码
时间:2022-06-25 14:06:53 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下CSS3不定高宽垂直水平居中的几种方式代码,通过文中代码详细介绍了几种不定高宽垂直水平居中的方式,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
1、flex布局
css;">.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; }
相关文章
- 价格跟踪交易-价格跟踪交易软件 04-25
- 碧蓝航线使用要注意什么 04-25
- 明日之后苹果能做什么食物攻略 04-25
- 以闪亮之名浅栗捏脸数据id攻略 04-25
- 逆水寒手游春归学堂奇遇如何完成 04-25
- 明日之后二层别墅建造蓝图攻略 04-25