[分享]css中如何将图片居中显示图片

CSS中有多种方法可以将图片居中显示，下面简单介绍几种常用的方法： / 方法1：利用textalign属性 / img { display: block; / 必须设置为块级元素才能居中 / marg...

CSS中有多种方法可以将图片居中显示，下面简单介绍几种常用的方法：

 /* 方法1：利用text-align属性 */
    img {
        display: block;  /* 必须设置为块级元素才能居中 */
        margin: 0 auto;  /* 将左右边距设为auto即可水平居中 */
        text-align: center;  /* 将图片包裹的容器的text-align设为center实现垂直居中 */
    }

    /* 方法2：利用定位和transform属性 */
    .container {
        position: relative;  /* 将容器设为相对定位 */
    }
    img {
        position: absolute;  /* 将图片绝对定位，相对于容器 */
        top: 50%;  /* 将上边距设为50% */
        left: 50%;  /* 将左边距设为50% */
        transform: translate(-50%, -50%);  /* 利用transform属性向左、向上移动自身宽高的一半实现居中 */
    }

    /* 方法3：利用flex布局 */
   /*将父元素设为Flex 容器，在容器上使它成为一个flex 格子*/  
      .container {
        display: flex;
        /* 主轴方向为水平方向，即X轴，即不换行*/
        flex-direction: row;
        /*纵轴方向为垂直方向，即Y轴，即不中间对齐*/
        align-items: center; /*将子元素中心对齐*/
        justify-content: center;/*将子元素水平居中对齐*/
    }