Maison > Article > interface Web > 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
- 高洛峰original
- 2017-03-27 10:14:471452parcourir
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>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!
Déclaration：
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
Article précédent：Explication détaillée du modèle de boîte flexible de CSS3Article suivant：Explication détaillée du modèle de boîte flexible de CSS3