常用CSS居中_html/css_WEB-ITnose
程序员文章站
2022-05-13 19:20:15
...
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;}