欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css中不確定盒子寬高上下左右居中的八種方法小結

  發(fā)布時間：2023-08-23 16:39:17   作者：Forestご   我要評論
本文主要介紹了css中不確定盒子寬高上下左右居中的八種方法小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

第一種：利用絕對定位和margin:auto實現(xiàn)

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屬性實現(xiàn)

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布局實現(xiàn)

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布局實現(xiàn)

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實現(xiàn)

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實現(xiàn)

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實現(xiàn)

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實現(xiàn)

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>

到此這篇關于css中不確定盒子寬高上下左右居中的八種方法小結的文章就介紹到這了,更多相關css盒子上下左右居中內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • CSS子盒子水平和垂直居中的五種方法

    本文主要介紹了CSS子盒子水平和垂直居中的五種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習
    2022-07-19

  • css 利用 position + margin 實現(xiàn)固定盒子橫向縱向居中的方法

    這篇文章主要介紹了css 利用 position + margin 實現(xiàn)固定盒子橫向縱向居中的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要
    2020-12-23

  • 使用CSS實現(xiàn)盒子水平垂直居中的方法(8種)

    這篇文章主要介紹了使用CSS實現(xiàn)盒子水平垂直居中的方法(8種)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來
    2020-11-11

  • CSS盒子居中的常用的幾種方法(小結)

    這篇文章主要介紹了CSS盒子居中的常用的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學
    2020-03-31

最新評論