css3中通过transform设置盒子居中的解析

Posted 考拉的墨尔本

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3中通过transform设置盒子居中的解析相关的知识,希望对你有一定的参考价值。

web页面设置居中的方式有很多种,关于css3中新增的transform设置居中可能有人不太熟悉,今天我们就说明一下为什么transform可以实现居中。

<head>
        <meta charset="utf-8">
        <style type="text/css">
        	#outer
        		height: 300px;
        		width: 300px;
        		border:1px solid red;
				position: relative;
        	
        	#myDiv2
        		height: 100px;
        		width: 100px;
        		background: yellow;
        		position: absolute;
        		left: 50%;
        		top: 50%;
        		transform:translate(-50%,-50%);
        	
        </style>
    </head>
    <body>
    	<div id="outer">
    		<div id="myDiv2">
    			
    		</div>
    	</div>
    	<script type="text/javascript">
    		var myDiv2=document.getElementById('myDiv2');
    		var obj=window.getComputedStyle(myDiv2,null)['left'];
    		var obj1=window.getComputedStyle(myDiv2,null)['transform'];
    		console.log(obj);//输出150px
    		console.log(obj1);//输出matrix(1, 0, 0, 1, -50, -50)
    		// console.log(myDiv.offsetLeft);
    	</script>
    </body>

通过上面的代码,我们可以总结出两个方面:

1.定位元素的left/top等是相对于父元素的宽高的;

2.transform中的translate获取的是相对于元素本身的宽和高。

所以我们可以通过transform来设置盒子在父盒子中居中,具体可以复制上面的代码,可以实际运行一下就可以很明确的得出结论。

以上是关于css3中通过transform设置盒子居中的解析的主要内容,如果未能解决你的问题,请参考以下文章

盒子在浏览器中水平垂直居中

用一段css实现盒子垂直水平居中方法(8种)-案例

css3之flex

CSS知识点

CSS3动画

将一个不定宽高的盒子设置水平垂直居中的六种方法