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

这篇文章主要介绍了CSS3 不定高宽垂直水平居中的几种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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 不定高宽垂直水平居中的几种方式的文章就介绍到这了,

• 0
• 0
• 0
• 0
• 0