div垂直居中（全兼容ie6+）

最新推荐文章于 2024-06-23 16:20:36 发布

夕空

最新推荐文章于 2024-06-23 16:20:36 发布

阅读量1.9k

点赞数

分类专栏： html 文章标签：垂直居中 div垂直居中

本文链接：https://blog.csdn.net/zhi_jie/article/details/84768199

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

忘记从哪里借鉴的了，直接贴上：

<!DOCTYPE html>
<html lang="zh-cn">
<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>

夕空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div垂直居中（全兼容ie6+）

忘记从哪里借鉴的了，直接贴上：&lt;!DOCTYPE html&gt;&lt;html lang="zh-cn"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;全兼容垂直居中&lt;/title&gt; &lt;style type="text/css"&am
复制链接

扫一扫

专栏目录