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>
造成了没有办法垂直居中!