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;
}