如何使图片在DIV 中水平垂直居中

  下面通过一个小例子,介绍如何实现。

  效果图:

  如何使图片在DIV 中水平垂直居中_第1张图片

  素材:

  1. 宽高1px的背景图片 dl_bg00.gif

  

  2. 宽931px高342px的图片 dl_bg01.gif

  如何使图片在DIV 中水平垂直居中_第2张图片

  步骤:

  1. 编写代码,将id为bg的div的宽高设为body大小,填充背景,代码如下:

  
 

	
		如何使图片在DIV中水平垂直居中
		
	
	
		


  2. 将盛放图片的id为main的div水平居中,设置背景,代码如下:

  

 

	
		如何使图片在DIV中水平垂直居中
		
	
	
		


  3. 将id为main的div中的背景图片垂直居中,代码如下:

  

 

	
		如何使图片在DIV中水平垂直居中
		
	
	
		


 

你可能感兴趣的:(css)