请选择 进入手机版 | 继续访问电脑版

css3定位元素居中样式代码教程

[复制链接]
查看2092 | 回复0 | 2020-7-23 16:25 | 显示全部楼层 |阅读模式
css3定位元素居中样式代码教程
第一种方法:
  1. .element {   
  2.     width: 600px; height: 400px;   
  3.     position: absolute; left: 50%; top: 50%;   
  4.     margin-top: -200px;    /* 高度的一半 */  
  5.     margin-left: -300px;    /* 宽度的一半 */  
  6. }  
复制代码
第二种方法:
  1. .element {   
  2.     width: 600px; height: 400px;   
  3.     position: absolute; left: 50%; top: 50%;   
  4.     transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */  
  5. }  
复制代码
transform: translateX(-50%); 表示自身元素宽度向左移动50%。
transform: translateY(-50%); 表示自身元素宽度向上移动50%。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-3-24