div垂直居中兼容所有浏览器

前端技术 - CSS

一帘幽梦 2017-9-30 14:39:13

尺寸不同的图片在一个容器中垂直居中,是一个非常难把握的技术,再来通过一个实例,来展示div垂直居中,并兼容所有浏览器。

代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>div垂直居中兼容所有浏览器</title>
<style type="text/css">
*{margin:0;padding:0;}
#content{
  width:300px;
  margin:40px auto;
}
#imageContext{
  width:300px;
  height:300px;
  border: 1px solid #666;
  overflow: hidden;
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
#imageContext p{
  position: static;
  +position:absolute;
  top:50%
}
img{
  position: static; 
  +position:relative;
  top:-50%;
  left:-50%;
}
</style>
</head>
<body>
<h1 style="text-align:center;">下面演示的是一个图片在div中的垂直居中</h1>
<div id="content">
<div id="imageContext">
<p><img src="box.png" /></p>
</div>
</div>
</body>
</html>

效果如图所示:

div垂直居中

返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验