Résume plusieurs façons d'obtenir le centrage CSS Remarque : * est la méthode courante, "wrap" est le conteneur et "div" est l'élément à centrer.
*1.Positionnement absolu, le code suivant peut être implémenté lorsque la largeur et la hauteur sont connues, ou vous pouvez utiliser des marges négatives ; 🎜>
.div { width: 200px; height: 200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.div{ position: absolute; left: 30%; right:30%; top: 25%; bottom:25%; }
.wrap{ width:200px;//也可以不写,默认占总宽度的50% position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
.wrap{//外层容器 display: table; } .div{//内层容器 display: table-cell; vertical-align: middle; }
.wrap{ display: flex; display: -webkit-flex; justify-content: center; align-items: center; }
:after.
.wrap { text-align: center; overflow: auto; } .wrap:after, .div { display: inline-block; vertical-align: middle; } .div:after { content: ''; height: 100%; margin-left: -0.25em; /* 需要根据不同的字号做调整 */ } .wrap { max-width: 99%; /* 防止文档过长时会到容器的顶部 */ max-width: calc(100% - 0.25em) /* Only for IE9+ */ }
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!