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不定高宽垂直水平居中的方法有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
文章标题:CSS3不定高宽垂直水平居中的方法有哪些-创新互联
分享网址:http://scyanting.com/article/csdgdi.html