js实现元素水平垂直居中

最新推荐文章于 2024-01-09 10:10:17 发布

weixin_30416871

最新推荐文章于 2024-01-09 10:10:17 发布

阅读量648

点赞数

原文链接：http://www.cnblogs.com/liwenjian/p/7899365.html

版权

之前有写过css/css3实现元素的水平和垂直居中的几种方法点我，但是css3属性不是所有浏览器都能兼容的，今天写下js实现未知宽高的元素的水平和垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				padding:50px;
				display: inline-block;
				background-color:pink;
				position: absolute;
			}
		</style>
		<script>
			window.onload = function(){
//				获取元素
				var div = document.querySelector('div');
//				设置left 
				div.style.left=(window.innerWidth - div.offsetWidth)/2 + 'px';
//				设置top
				div.style.top= (window.innerHeight- div.offsetHeight)/2 + 'px';
			}
		</script>
	</head>
	<body>
		<div>
			陌上人如玉
			<br />
			公子士无双
		</div>
	</body>
</html>

如果需要在有滚动条的情况的下要实现居中的效果，则需要加上scrollTop和scrollLeft。

转载于:https://www.cnblogs.com/liwenjian/p/7899365.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30416871

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现元素水平垂直居中

之前有写过css/css3实现元素的水平和垂直居中的几种方法点我，但是css3属性不是所有浏览器都能兼容的，今天写下js实现未知宽高的元素的水平和垂直居中。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &...
复制链接

扫一扫