css实现图片居中于屏幕

标签: css图片居中屏幕   时间:2016-09-01
本文章向大家介绍css如何实现将图片居中于屏幕,不管屏幕多大多高,永远显示在屏幕中间,需要的朋友可以参考一下本文章的源代码。

css实现图片居中于屏幕,源码如下:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #000;
  width:100px;
  height:100px;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.div{
   width:100%;
	 position:absolute;
	 top:0;
	bottom:0;
   background:#f00

}
body{
 margin:0;
	padding:0;

}
</style>
</head>

<body>
<div class="div">
	<img src="/images/online_demo/smiley.gif" class="center">
</div>
</body>

</html>

在线运行

原文地址:http://www.manongjc.com/article/1432.html