CSS3 不定高宽垂直水平居中的几种方式
程序员文章站
2022-06-28 11:50:09
这篇文章主要介绍了CSS3 不定高宽垂直水平居中的几种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧... 20-03-26...
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 不定高宽垂直水平居中内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！