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

相關標籤/搜索