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

最新推荐文章于 2023-12-08 13:52:02 发布

考拉的墨尔本

最新推荐文章于 2023-12-08 13:52:02 发布

阅读量3.6k

点赞数

文章标签： css3 元素居中

本文链接：https://blog.csdn.net/yaojxing/article/details/73729506

版权

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来设置盒子在父盒子中居中，具体可以复制上面的代码，可以实际运行一下就可以很明确的得出结论。