Maison > interface Web > tutoriel HTML > 常用CSS居中 - Moustache

常用CSS居中 - Moustache

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-20 13:46:45
original
1122 Les gens l'ont consulté

1.flex方法:

.center_fix
{ 
display:flex; 
align-items:center;
justify-content: center;
}
Copier après la connexion

具体flex方法教程:可以参见软老师的——》Flex 布局教程:实例篇

2.position:absolute

.center
{

position: absolute;

top:50%; left:50%;

width: 100px;

height:100px;

margin-top: -50px;

margin-left:-50px;

background: teal;

}
Copier après la connexion

3.position: fixed;和上一个absolute方法差不多

.center{
position: absolute;
top:50%;
left:50%;
width: 100px;
height:100px;
margin-top: -50px;
margin-left:-50px;
background: teal;
} 
Copier après la connexion

4.

.center{
position: fixed;
width: 100px;
height: 100px;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: teal; 
}
Copier après la connexion


5.

.center{
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: teal;
}  
Copier après la connexion

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;
} 
Copier après la connexion


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal