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

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

html：

<p class="1cb2-dca4-0c0e-1313 box">
    <img src="./img/77.jpeg" alt="" class="dca4-0c0e-1313-b402 img">
</p>

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:

<p class="0f97-56f4-497d-f575 box">
    <img src="./img/77.jpeg" alt="" class="56f4-497d-f575-3222 img">
</p>

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：

<p class="a3f4-d150-a81e-1cb2 box">
    <img src="./img/77.jpeg" alt="" class="d150-a81e-1cb2-dca4 img">
</p>

css：

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

第四种：利用grid布局实现

html：

<p class="b402-256b-0f97-56f4 box">
    <img src="./img/77.jpeg" alt="" class="256b-0f97-56f4-497d img">
</p>

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：

<p class="06a2-a3f4-d150-a81e box">
    <img src="./img/77.jpeg" alt="" class="a3f4-d150-a81e-1cb2 img">
</p>

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：

<p class="1313-b402-256b-0f97 box">
    <img src="./img/77.jpeg" alt="" class="b402-256b-0f97-56f4 img">
</p>

css：

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

第七种：利用table-cell实现

html：

<p class="f575-3222-ff1d-1172 box">
    <img src="./img/77.jpeg" alt="" class="3222-ff1d-1172-d415 img">
</p>

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：

<p class="1cb2-dca4-0c0e-1313 box">
    <img src="./img/77.jpeg" alt="" class="dca4-0c0e-1313-b402 img">
</p>

css：

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

到此这篇关于css中不确定盒子宽高上下左右居中的八种方法小结的文章就介绍到这了,更多相关css盒子上下左右居中内容请搜索酷瑞百科以前的文章或继续浏览下面的相关文章，希望大家以后多多支持酷瑞百科！