CSS—图片水平垂直居中

图片居中

方法1.将放置图片的容器的布局改为

display: table-cell;
text-align: center;

可以使容器内的元素均居中显示。效果如下：

如果需要水平垂直居中，添加

display: table-cell;
text-align: center;
vertical-align: middle;

效果如下：

 

！ps:当两个table-cell元素放在一起的时候，他们会被自动放入一个table中，然后他们将拥有同等高度，也会是外部元素的布局失去作用。

可以在两个table-cell元素中间放置一个其他布局的元素作为分割。

 

方法2：使用定位+margin:auto的方式实现

这种方式适用于块级元素或图片，不适用于其他行内元素

代码：

div{
    position:relative;
}
img{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}