怎样使用CSS实现盒子水平垂直居中-创新互联
小编给大家分享一下怎样使用CSS实现盒子水平垂直居中,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、雅安服务器托管、营销软件、网站建设、城西网站维护、网站推广。原始代码:
center.html
:
Center
center.css
:
body { background-color: #6ed0ff; } .father { background-color: #be33ec; border-radius: 20px; box-shadow: 0 0 15px rgb(0, 0, 0); margin: 100px auto; width: 300px; height: 300px; } .son { background-color: #fcff00; border-radius: 20px; box-shadow: 0 0 10px rgb(0, 0, 0); width: 100px; height: 100px; }
原始效果:
实现子盒子相对于父盒子垂直居中效果:
1.grid
.father { display: grid; } .son { align-self: center; justify-self: center; }
2.absolute
+ 负margin
.father { position: relative; } .son { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }
3.absolute
+transform
.father { position: relative; } .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
4.absolute
+margin: auto
.father { position: relative; } .son { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
5.flex
.father { display: flex; justify-content: center; align-items: center; }
6.margin
+transfrom
.father { overflow: hidden; } .son { margin: 50% auto; transform: translateY(-50%); }
7.table-cell
.father { display: table-cell; text-align: center; vertical-align: middle; } .son { display: inline-block; }
8.inline-block
+vertical-align
.father { text-align: center; line-height: 300px; } .son { display: inline-block; vertical-align: middle; }
以上是“怎样使用CSS实现盒子水平垂直居中”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站名称:怎样使用CSS实现盒子水平垂直居中-创新互联
新闻来源:http://pwwzsj.com/article/ddsppc.html