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

夕曼

第一种：利用绝对定位和margin:auto实现

html：

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

css：

<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>

第二种：利用css3的transform属性实现

html:

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

css:

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

第三种：利用flex布局实现

html：

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

css：

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

第四种：利用grid布局实现

html：

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

css：

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

第五种：利用display: -webkit-box实现

html：

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

css：

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

第六种：利用display: flex和margin: auto实现

html：

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

css：

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

第七种：利用table-cell实现

html：

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

css：

<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>

第八种：利用display: grid和place-items: center实现

html：

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

css：

<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>