你的位置:首页 > 网页设计

[网页设计]常用CSS居中

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