最新下载
热门教程
- 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;
}
相关文章
- 洛克王国世界隐藏传送点大全 洛克王国世界全地图秘境传送位置汇总 03-28
- 洛克王国世界圣羽翼王怎么过 圣羽翼王打法思路推荐 03-28
- 毒液突击队尸王打法攻略 毒液突击队尸王Boss通关技巧与阵容搭配 03-28
- 羞羞漫画-登录入口免费阅读 03-28
- 燕云十六声新赛季新增免费配饰一览 03-28
- 樱花动漫app官方正版下载安装最新版-樱花动漫正版app安卓版下载安装入口 03-28