常用CSS居中_html/css_WEB-ITnose

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;}