css中幾種常見的居中方式

直接上代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
{
margin: 0;
padding: 0;
}
/
水平居中 margin : 0 auto; */
.box{
width: 300px;
height: 300px;
border: 2px solid red;
}
.img1{
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}

1.0.jpg
  /*水平垂直居中*/
  .box2{
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid blue;
    background: yellow;
  }
  .img2{
      width: 100px;
      height: 100px;
      position: absolute;
      top:50%;
      left:50%;
      margin-left: -50px;
      margin-top: -50px;
   }
2.0.jpg
       /*水平垂直居中  2   */
   .box3{
     width: 300px;
     height: 300px;
     position: relative;
     border: 1px solid blue;
   }
   .img3{
       width: 100px;
       height: 100px;
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       margin: auto;
    }
3.0.jpg
       /*水平垂直居中  3   css3新屬性 */
    .box4{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid blue;
    }
    .img4{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
     }
4.0.jpg
     /* table-cell  將其變?yōu)楸砀?*/
     .box5{
       width: 300px;
       height: 300px;
       display: table-cell;
       vertical-align: middle;
       text-align: center;
       border: 1px solid blue;
     }
     .img5{
         width: 100px;
         height: 100px;
      }
5.0.jpg
      /* flex布局完成 */
      .box6{
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid blue;
      }
      .img6{
          width: 100px;
          height: 100px;
       }
6.0.jpg

</style>
</head>
<body>
<div class="box">



</div>
<div class="box2">



</div>
<div class="box3">

</div>
<div class="box4">

</div>
<div class="box5">



</div>
<div class="box6">

</div>
</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容