css图片在容器内居中代码

今天我们来聊一下CSS图片在容器内居中的代码问题。一般情况下，我们会使用“text-align:center;vertical-align:middle;”的方法来实现图片在容器中水平居中和垂直居中。下面是具体的代码实现：

首先，我们需要给图片容器一个样式：

.container{
    width: 800px;
    height: 500px;
    position: relative;
    border: 1px solid gray;
    text-align: center;
    vertical-align: middle;
}

可以看到，这个容器的宽度和高度都已经设定好了，也增加了边框的样式。接着，我们需要将图片样式设置为绝对定位并设置为在容器中水平居中和垂直居中。

.img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

这里，我们使用了transform属性的translate属性，使图片的左上角底部偏移量为自身宽高的50%，也就是使图片完全居中。

最后，我们将图片和容器结合后就可以看到图片完全居中了。

<div class = "container">
    <img class = "img" src = "picture.gif">
</div>

代码结合效果如下：

那么就这样，我们成功了让CSS图片在容器内居中，上面的代码记得要好好体会呦