常用CSS居中 - Moustache
程序员文章站
2022-05-24 14:46:26
...
1.flex方法:
.center_fix { display:flex; align-items:center; justify-content: center; }
具体flex方法教程:可以参见软老师的——》Flex 布局教程:实例篇
2.position:absolute
.center { position: absolute; top:50%; left:50%; width: 100px; height:100px; margin-top: -50px; margin-left:-50px; background: teal; }
3.position: fixed;和上一个absolute方法差不多
.center{ position: absolute; top:50%; left:50%; width: 100px; height:100px; margin-top: -50px; margin-left:-50px; background: teal; }
4.
.center{ position: fixed; width: 100px; height: 100px; top: 0; right: 0; left: 0; bottom: 0; margin: auto; background: teal; }
5.
.center{ position: absolute; width: 100px; height: 100px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: teal; }
6.CSS3盒模型display:-webkit-box
.center{ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; width:100px; height:100px; background:teal; color:black; }
上一篇: PHP生成二维码的2种形式