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

素颜马尾好姑娘i 2022-06-13 03:14 255阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现文字或者div盒子水平垂直居中的方法

实现水平垂直居中的方法文本（文字）内容属于行内元素行内元素水平垂直居中方法方式一：设置文字外层的盒子 text-align:center

左手的ㄟ右手/ 2023年08月17日 16:52/ 0 赞/ 122 阅读

相关 CSS3 弹性盒子属性解析

1、CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是

逃离我推掉我的手/ 2022年12月29日 09:18/ 0 赞/ 144 阅读

相关 CSS盒子居中的方法

CSS盒子居中的方法 1. CSS盒子水平居中的方法 1.1 使用 margin: 0 auto; 当元素的左右外边距（margin）相等的时候，元素就处在中

电玩女神/ 2022年10月13日 05:25/ 0 赞/ 218 阅读

相关 css3中的transform,渐变，rgba

w3c plus airen的blog [transform的链接][transform] [渐变][Link 1] [rgba]

逃离我推掉我的手/ 2022年10月01日 04:43/ 0 赞/ 159 阅读

相关 css设置居中的常见情况

1.对于定宽块级元素，设置其水平居中的方法： margin:0 auto;使用这种方法要注意两个前提条件： 1.定宽(注意：如果宽度是100%,则这种方法是不管用的) 2

╰半橙微兮°/ 2022年06月17日 06:50/ 0 赞/ 156 阅读

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

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

素颜马尾好姑娘i/ 2022年06月13日 03:14/ 0 赞/ 256 阅读

相关让盒子绝对居中的办法

让一个盒子绝对居中的方式： position：absolute； left：0； right：0； top：0； bottom：0； margin：auto；因为

电玩女神/ 2022年05月23日 08:58/ 0 赞/ 173 阅读

相关 CSS3中的transform变形详解

在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种

刺骨的言语ヽ痛彻心扉/ 2022年05月11日 05:03/ 0 赞/ 303 阅读

相关 CSS3中的transform转换属性

属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration

布满荆棘的人生/ 2021年10月29日 07:34/ 0 赞/ 352 阅读

相关 CSS - 设置盒子垂直居中的几种方法

CSS设置盒子垂直居中的几种方法将要实现的效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

骑猪看日落/ 2021年07月25日 15:17/ 0 赞/ 436 阅读