中心对称

CSS3 2D 转换

div
{
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);		/* IE 9 */
    -webkit-transform: translate(50px,100px);	/* Safari and Chrome */
    -o-transform: translate(50px,100px);		/* Opera */    
    -moz-transform: translate(50px,100px);		/* Firefox */
}

作用:值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

测试代码

 <!DOCTYPE HTML>
<html lang="en">
 <head>
  <title> 中心对称  </title>
  <meta charset="UTF-8">
 </head>
 <style>
      *{
          padding: 0;
          margin: 0;

      }
      div{
           width: 200px;
           height: 200px;
           background: red;
           position:absolute;
           left: 50%;
           top: 50%;           
		   /*translate(x,y)	定义 2D 转换,沿着 X 和 Y 轴移动元素。*/
           transform: translate(-50%,-50%);/* 2D 转换*/
		   text-align: center;
      }
	  div h1{
			line-height: 200px;	
	  }
 </style>
 <body>
   <div><h1>中心对称<h1></div>
 </body>
</html>


效果图

总结

position:absolute;
left: 50%;
top: 50%;           
/*translate(x,y)	定义 2D 转换,沿着 X 和 Y 轴移动元素。*/
transform: translate(-50%,-50%);/* 2D 转换*/
posted @   我心如铁  阅读(422)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
点击右上角即可分享
微信分享提示