Tajuk yang ditulis semula: Pusatkan elemen segi empat sama atau bulatan HTML tetap secara mendatar dan menegak apabila diubah saiz

Question

Bagaimana untuk memusatkan elemen html tetap segi empat sama atau bulatan dengan saiz yang berbeza-beza secara mendatar dan menegak? Saya fikir kesukaran timbul daripada hakikat bahawa lebar dan ketinggian mesti kekal sama.

Answer 1

Saya rasa masalah ini boleh diselesaikan dengan mudah dengan flex. Balut elemen segi empat sama atau bulatan yang berkaitan daripada unsur induk (div). Kemudian gunakan sifat justify-content dan align-item kepada teg induk. Di sini saya menggunakan 100vh 100vw sebagai ketinggian dan lebar bekas induk untuk demonstrasi. Tetapi anda boleh mengubahnya mengikut tujuan anda.

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