css中不确定盒子宽高上下左右居中的八种方法小结

<div class="box">     <img src="./img/77.jpeg" alt="" class="img"> </div>

<style>     body{       margin: 0;     }     .box{       height: 100vh;       background-color: hotpink;       position: relative;     }     .img{       position: absolute;       top: 0;       left: 0;       bottom: 0;       right: 0;       margin: auto;     } </style>

<div class="box">     <img src="./img/77.jpeg" alt="" class="img"> </div>

<style>       body {         margin: 0;       }       .box {         height: 100vh;         background-color: hotpink;         position: relative;       }       .img {         position: absolute;         top: 50%;         left: 50%;         transform: translate(-50%, -50%);       } </style>

<div class="box">     <img src="./img/77.jpeg" alt="" class="img"> </div>

<style>       body {         margin: 0;       }       .box {         height: 100vh;         background-color: hotpink;         display: flex;         /* 上下居中 */         align-items: center;         /* 左右居中  但是图片高度会撑满 */         justify-content: center;       } </style>

<div class="box">     <img src="./img/77.jpeg" alt="" class="img"> </div>

<style>       body {         margin: 0;       }       .box {         height: 100vh;         background-color: hotpink;         display: grid;       }       .img {         display: inline-block;         /* 上下居中 */         align-self: center;         /* 左右中 */         justify-self: center;       } </style>

<div class="box">     <img src="./img/77.jpeg" alt="" class="img"> </div>

<style>       body {         margin: 0;       }       .box {         height: 100vh;         background-color: hotpink;         display: -webkit-box;         /* 上下居中 */         -webkit-box-align: center;         /* 左右居中 */         -webkit-box-pack: center;       } </style>

<div class="box">     <img src="./img/77.jpeg" alt="" class="img"> </div>

<style>       body {         margin: 0;       }       .box {         width: 100vw;         height: 100vh;         background-color: hotpink;         display: flex;       }       .img {         margin: auto;       }     </style>

<div class="box">     <img src="./img/77.jpeg" alt="" class="img"> </div>

<style>       body {         margin: 0;       }       .box {       	/* 要有宽高 */         width: 100vw;         height: 100vh;         background-color: hotpink;         display: table-cell;         /* 左右居中 */         text-align: center;         /* 上下居中 */         vertical-align: middle;       }       .img {         /* 不加也可以 */         display: inline-block;       } </style>

<div class="box">     <img src="./img/77.jpeg" alt="" class="img"> </div>

<style>       body {         margin: 0;       }       div {         height: 100vh;         background-color: hotpink;         display: grid;         /* 是同时设置 align-items 和 justify-items 的快速方法。通过将其设置为 center ， align-items 和 justify-items 都将设置为 center。 */         place-items: center;       }       /* .img {         没有固定的宽高       } */ </style>