table-cell方法垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="table-cell方法居中">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
.upload_img {
position: relative;
width: 150px;
height: 150px;
border: 1px solid #ccc;
display: table-cell;
background: #eee;
vertical-align: middle;
}
.upload_img img {
border: none;
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
</style> <body>
<div id="imgdiv3" class="upload_img">
<img src="http://images2015.cnblogs.com/blog/653009/201603/653009-20160310103258132-1841991840.jpg" id="imgShow3" >
</div>
</body>
</html>
当div浮动的时候就无法使用上面的方法进行垂直居中了，接下来就用到line-height进行居中了
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
.upload-img {
float:right;
width: 200px;
height: 200px;
background-color: #ccc;
line-height: 200px;
vertical-align: middle;
text-align: center
}
img{
vertical-align: middle;max-width:100%;max-height:100%;
}
</style>
<body>
<div>
<div class="upload-img">
<img src="http://images2015.cnblogs.com/blog/653009/201603/653009-20160310103258132-1841991840.jpg">
</div>
</div> </body>
</html>
有个问题值得注意，编写代码的时候没有添加
<!doctype html>
造成了没有办法垂直居中!