忘記從哪裡借鑒的了,直接貼上:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>全相容垂直居中</title>
<style type="text/css">
html,body{margin: 0;padding: 0;width: 100%;height: 100%;}
.wrapmiddle {
display: table; width: 100%;height: 100%;overflow: hidden;*position: relative;
}
.wrapmiddle .wrapsub {display: table-cell;vertical-align: middle;*position: absolute;*top: 50%;}
.wrapmiddle .wrapsub .wrapbox {*position: relative;*top: -50%;}
</style>
</head>
<body>
<div class="wrapmiddle">
<div class="wrapsub">
<div class="wrapbox" style="width: 70%;margin: 0 auto; background: yellow;">
<img width="100%" src="https://i0.hippopx.com/photos/320/918/427/sky-clouds-sunlight-dark-preview.jpg">
垂直居中了
</div>
</div>
</div>
</body>
</html>