CSS3不定高宽垂直水平居中的方法有哪些
这篇文章给大家分享的是有关CSS3不定高宽垂直水平居中的方法有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联是一家专业提供三亚企业网站建设,专注与网站制作、成都网站建设、HTML5、小程序制作等业务。10年已为三亚众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
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://ybzwz.com/article/gigeoj.html