Titre réécrit : centrez un élément carré ou circulaire HTML fixe horizontalement et verticalement une fois redimensionné.

Question

Comment centrer un élément HTML fixe carré ou circulaire de différentes tailles horizontalement et verticalement ? Je pense que la difficulté vient du fait que la largeur et la hauteur doivent rester égales.

Answer 1

Je pense que ce problème peut être facilement résolu avec flex. Enveloppez les éléments carrés ou circulaires associés à partir d’un élément parent (div). Utilisez ensuite les propriétés justifier-content et align-item sur la balise parent. Ici, j'utilise 100vh 100vw comme hauteur et largeur du conteneur parent pour la démonstration. Mais vous pouvez le modifier selon votre objectif.

.container{
  min-width:100vw;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.my-element{
  width:100px;
  height:100px;
  background-color:#000000;
}