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

素颜马尾好姑娘i 2022-06-13 03:14 270阅读 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 条评论，270人围观）

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

相关阅读

相关 CSS 盒子垂直居中的方法

目录一、前言二、CSS盒子垂直居中的方法 2.1.display:flex弹性布局实现 2.2.display:grid网格布局实现 2.3.table表格

以你之姓@/ 2023年10月12日 09:53/ 0 赞/ 71 阅读

相关 CSS 盒子垂直居中的方法

一、盒子垂直居中的方法　　1、先让盒子的上下边缘和父盒子的水平中心线重叠，，然后再让子盒子往回移动自身一半的距离。 <div class="father">

野性酷女/ 2023年02月27日 12:24/ 0 赞/ 30 阅读

相关 CSS3 弹性盒子属性解析

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

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

相关 css设置元素居中的方法

1、水平居中 1) text-align：设置块级元素(父级元素)里面的内容水平居中 <div class="parent"> <span>hao </

男娘i/ 2022年12月23日 03:57/ 0 赞/ 66 阅读

相关 CSS盒子居中的方法

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

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

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

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

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

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

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

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

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

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

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

相关 CSS3中的transform变形详解

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

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

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

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

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