Maison >interface Web >tutoriel CSS >Trois méthodes pour centrer horizontalement et verticalement des éléments en position absolue
Trois méthodes pour centrer horizontalement et verticalement des éléments en position absolue
- php中世界最好的语言original
- 2018-03-22 15:26:525759parcourir
Cette fois, je vais vous présenter trois façons de centrer horizontalement et verticalement des éléments en position absolue. Quelles sont les précautionspour obtenir un centrage horizontal et vertical d'éléments en position absolue ? un cas pratique, jetons un oeil.
1.css pour réaliser le centrage
Inconvénients : Nécessité de connaître la largeur et la hauteur de l'élément à l'avance.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
2. CSS3 réalise un centrage horizontal et vertical
Remarque : Quelle que soit la taille de l'élément, il peut être centré . Cependant, cette méthode d'écriture n'est compatible qu'avec IE8 et supérieur et peut être ignorée sur les terminaux mobiles.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
3. Marge : auto pour réaliser le centrage
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux choses plus excitantes. Autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Explication détaillée du chargement dynamique des CSS
Explication détaillée du processus de mise en œuvre en forme d'éventail menu animé en CSS3
Comment utiliser la propriété webkit-tap-highlight-color de CSS3
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!