communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Exemple de code d'implémentation CSS3 pour les éléments centrés horizontalement et verticalement

Exemple de code d'implémentation CSS3 pour les éléments centrés horizontalement et verticalement

高洛峰

Libérer： 2017-03-27 10:14:47

original

1473 Les gens l'ont consulté

Cet article présente principalement l'exemple de code d'implémentation CSS3 pour le centrage horizontal et vertical des éléments. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Sans plus tarder, le code est le suivant

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伸缩布局</title>
<style type="text/css">
*{
  margin: 0;
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
div{
    height: 100px;
    width: 100px;
    overflow: hidden;
     display:flex;
     border: 1px dotted red;
  align-items: center;
  justify-content:center;
}
img{
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>
    <div>
<img src="http://img.mukewang.com/5365d7b10001e8d506350529.jpg" alt="" /></div>
</body>
</html>

Copier après la connexion

Ensuite l'image est centrée

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!

Étiquettes associées：

css3

source：php.cn

Article précédent：Explication détaillée du modèle de boîte flexible de CSS3 Article suivant：Explication détaillée de l'effet de boîte CSS

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

Derniers articles par auteur