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

前端  /  管理员 发布于 7年前   193

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