transform 垂直居中

最新推荐文章于 2024-06-12 10:47:58 发布

weixin_33948416

最新推荐文章于 2024-06-12 10:47:58 发布

阅读量893

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3680343/blog/1825235

版权

2019独角兽企业重金招聘Python工程师标准>>>

transform可以让不定宽高的元素水平，竖直方向上垂直居中

1.垂直居中满足的条件

>绝对定位元素

<style>
	html,body{
		width:100%;
		height:100%;
		margin:0;
	}
	#divContainer{
		position: relative;
		width:100%;
		height:100%;
		background:#000;
	}
	.div-center{
		width:50%;
		height:20%;
		position: absolute;
		left:50%;
		top:50%;
		background:#fff;
		-ms-transform:translate(-50%,-50%); 	/* IE 9 */
		-moz-transform:translate(-50%,-50%); 	/* Firefox */
		-webkit-transform:translate(-50%,-50%); /* Safari 和 Chrome */
		-o-transform:translate(-50%,-50%); 	/* Opera */
		transform: translate(-50%,-50%);
	}
</style>


<body>
		<div id="divContainer">
			<div class="div-center">垂直居中元素块</div>
		</div>
		<script type="text/javascript">
			
		</script>
	</body>

由于要兼容各种浏览器，在使用此属性的时候最好加上浏览器前缀

效果图