水平和垂直居中图像 [英] Centering image horizontally and vertically

问题描述

可能重复：

我想在我的网站上创建一个图片库，
，但我不能将图片居中在div。

div的CSS是：

  #animation 
 {
 display：none; 
 position：absolute; 
 z-index：1; 
 background：rgba（0,0,0,0.7）; 
 height：100％; 
 width：100％; 
 border：0px; 
} 
  

图片ID为：

  #pictures 
 {
 ... 
} 
  

解决方案

一种方法是使用表格单元格显示和 vertical align：middle;

Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div

I am trying to make an image gallery on my website, but I cannot center the image inside the div.

The CSS for the div is:

#animation
{
display : none;
position: absolute;
z-index:1;
background : rgba(0,0,0,0.7);
height: 100%;
width: 100%;
border: 0px;
}

And the image id is:

#pictures
{
...
}

解决方案

One way to do it is a table cell display and vertical align: middle;

Fiddle

这篇关于水平和垂直居中图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！