常用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: 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;
} 


posted @ 2016-05-13 09:15  Moustache  阅读(337)  评论(0编辑  收藏  举报