transform 垂直居中

时间 2019-11-06

标签 transform 垂直居中繁體版

原文原文链接

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

1.垂直居中知足的条件

>绝对定位元素html

<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>

因为要兼容各类浏览器，在使用此属性的时候最好加上浏览器前缀java

效果图web