[分享]css中如何让图片垂直居中

在CSS中，要让图片垂直居中需要一些技巧。下面将介绍几种常用的方法：

 .parent {
        display: flex;
        align-items: center;
    }

    .child {
        margin: 0 auto;
    } 

以上是使用Flexbox的方法。设置parent元素的display属性为flex，然后使用align-items属性将其子元素在垂直方向上居中。其中如果子元素是一个img标签，可以使用margin:0 auto;让其在水平方向上居中。

 .parent {
        position: relative;
    }
    
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    } 

这是另一种方法，使用绝对定位和transform。首先设置parent元素的position属性为relative，然后将child元素设置为position: absolute，并使用top:50%将其向下移动到父元素的中央位置。接下来使用transform:translateY(-50%)把它再向上移动50%的距离，即可让其在垂直方向上居中。

 .parent {
        display: table;
        height: 100%;
        width: 100%;
        text-align: center;
    }

    .child {
        display: table-cell;
        vertical-align: middle;
    } 

以上是使用display:table的方法。设置parent元素的display属性为table，然后用height和width将其设置为和父元素一样大小。使用text-align: center让其内部元素在水平方向上居中。最后设置child元素的display属性为table-cell，使用vertical-align: middle将其在垂直方向上居中。