欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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