浅谈translate属性与相对定位、绝对定位的区别

喜欢ヅ旅行 2022-06-16 06:53 266阅读 0赞

水平垂直居中的实现方式有多种，请见：[http://blog.csdn.net/zhouziyu2011/article/details/53514416][http_blog.csdn.net_zhouziyu2011_article_details_53514416]

在支持 CSS3 属性的现代浏览器当中，可以利用CSS3的translate属性实现水平垂直居中。

尤其是当子元素的width和height未知时，无法通过设置margin-left:-width/2和margin-top:-height/2来实现，这时候可以设置子元素的transform: translate(-50%,-50%)。

<!DOCTYPE html>
    <html>
    <head>  
        <style type="text/css">  
            #out{  
                position: fixed;  
                width: 400px;  
                height: 200px;  
                background: red;  
            }  
            #in{  
                width: 50%;  
                height: 50%; 
                background: yellow;  
                position: absolute;  
    			transform: translate(-50%,-50%);
                top: 50%;  
                left: 50%;   
            }  
        </style>  
    </head>  
    <body>  
        <div id="out">  
            <div id="in"></div>  
        </div>  
    </body>
    </html>

其实，在translate 函数当中使用百分比是以该元素的content、padding、border为标准计算的。

下面给子元素加上padding 和 border：

<!DOCTYPE html>
    <html>
    <head>  
        <style type="text/css">  
            #out{  
                position: fixed;  
                width: 400px;  
                height: 200px;  
                background: red;  
            }  
            #in{  
                width: 50%;  
                height: 50%; 
    			border: 5px solid pink;
    			padding: 5px; 
                background: yellow;  
                position: absolute;  
    			transform: translate(-50%,-50%);
                top: 50%;  
                left: 50%;   
            }  
        </style>  
    </head>  
    <body>  
        <div id="out">  
            <div id="in"></div>  
        </div>  
    </body>
    </html>

使用 CSS3 translate 属性和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移，但存在细微差别，表现在offsetLeft 和 offsetTop 属性。

使用绝对定位、相对定位属性加上 top、left ，会影响offsetTop和 offsetLeft 的值；

使用 translate 的offsetTop和 offsetLeft 与没有产生位移的元素没有区别，即无论translate 的值为多少，这offsetTop和 offsetLeft 的值都是固定不变的。

eg1：相对定位或绝对定位+left和top属性

<!DOCTYPE html>
    <html>
    <head>  
        <style type="text/css">  
            #container {
    			position: relative; /*或position: absolute;*/
    			width: 200px;
    			height: 200px;
    			background-color: red;
    			top: 100px;
    			left: 200px;
    		}
        </style>  
    </head>  
    <body>  
        <div id="container"></div>
    	<script>
    		var container = document.getElementById("container");
    		console.log(container.offsetLeft);
    		console.log(container.offsetTop);
    	</script>
    </body>
    </html>

eg2：translate属性

<!DOCTYPE html>
    <html>
    <head>  
        <style type="text/css">  
            #container {
    			position: relative; /*或position: absolute;*/
    			width: 200px;
    			height: 200px;
    			background-color: red;
    			transform: translate(300px,100px);
    		}
        </style>  
    </head>  
    <body>  
        <div id="container"></div>
    	<script>
    		var container = document.getElementById("container");
    		console.log(container.offsetLeft);
    		console.log(container.offsetTop);
    	</script>
    </body>
    </html>

[http_blog.csdn.net_zhouziyu2011_article_details_53514416]: http://blog.csdn.net/zhouziyu2011/article/details/53514416