关于移动端垂直居中对齐的几个方法

作者: 小梦子日期: 2016-07-26

208337

在移动前端制作中，我们会遇到垂直水平居中问题，下面介绍几种css3方法来解决；

1、CSS3的transform:translate

需要注意的是，这种写法会和其他transform样式有冲突，在某些情况下边缘和字体渲染会有问题

css

.center{
    width:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

2、利用Flexbox

移动设备基本兼容，可以放心使用，不过很容易掉坑，慎用！

css

.center {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

手机阅读请扫描下方二维码：

none

上一篇： CUTTERMAN 一款神奇的切图工具下一篇：使用jQuery快速解决IE9以下浏览器无法支持input的placeholder属性的问题

已有 70 条评论

admin

2020-10-23 09:54:08

12345678

回复
1. 1
  
  2023-09-11 18:53:04
  
  1
  
  回复
  1. 1
    
    2023-09-11 23:35:29
    
    555
    
    回复
    
    1
    
    2024-07-15 20:31:13
    
    1
    
    回复
  2. 1
    
    2023-09-16 03:12:36
    
    555
    
    回复
  3. 1
    
    2024-07-02 17:25:47
    
    1
    
    回复
2. 1
  
  2023-09-14 21:09:32
  
  1
  
  回复
  1. 1
    
    2023-09-15 22:10:54
    
    555
    
    回复
3. 1
  
  2023-09-15 20:11:48
  
  1
  
  回复
4. 1
  
  2023-09-23 03:51:36
  
  1
  
  回复
5. 1
  
  2023-10-05 08:46:09
  
  1
  
  回复
6. 1
  
  2024-03-13 10:39:58
  
  1
  
  回复
7. 1
  
  2024-07-02 17:23:39
  
  1
  
  回复
8. 1
  
  2024-07-02 17:24:39
  
  1
  
  回复
9. 1
  
  2024-07-02 17:24:39
  
  1
  
  回复
10. 1
  
  2024-07-15 20:29:13
  
  1
  
  回复
11. 1
  
  2024-07-15 20:30:13
  
  1
  
  回复
admin

2020-10-23 10:03:18

12345678

回复
1. 1
  
  2023-03-21 04:22:08
  
  555
  
  回复
  1. 1
    
    2023-09-14 21:51:07
    
    555
    
    回复
2. 1
  
  2023-03-24 14:29:12
  
  555
  
  回复
3. 1
  
  2023-09-11 19:26:41
  
  555
  
  回复
admin

2020-10-23 10:05:07

12345678

回复
admin

2020-10-23 10:05:07

12345678

回复
admin

2020-10-23 10:05:07

12345678

回复
1. 1
  
  2024-08-28 05:36:00
  
  1
  
  回复
admin

2020-10-23 10:05:07

12345678

回复
admin

2020-10-23 10:05:07

12345678

回复
admin

2020-10-23 10:05:07

12345678

回复
admin

2020-10-23 10:05:07

12345678

回复
admin

2020-10-23 10:05:07

12345678

回复
1. 1
  
  2023-01-25 13:17:03
  
  1
  
  回复
2. 1
  
  2023-01-25 13:17:03
  
  1
  
  回复
3. 1
  
  2023-01-25 13:17:03
  
  1
  
  回复
4. 1
  
  2023-01-25 13:17:03
  
  1
  
  回复
5. 1
  
  2023-01-25 13:17:03
  
  1
  
  回复
1

2023-01-25 13:14:49

1

回复
1

2023-01-25 13:14:49

1

回复
1

2023-02-28 04:00:31

1

回复
1

2023-02-28 04:00:31

1

回复
1

2023-03-18 08:15:11

1

回复
1

2023-03-21 00:23:26

1

回复
1

2023-03-21 03:17:29

555

回复
1

2023-03-24 13:42:18

1

回复
1

2023-03-24 14:35:34

555

回复
1

2023-03-26 12:49:15

1

回复
1

2023-04-01 02:27:05

1

回复
1

2023-04-03 09:29:56

1

回复
1

2023-04-04 21:35:09

1

回复
1

2023-06-23 06:55:45

1

回复
1

2023-06-23 06:55:45

1

回复
1

2023-09-11 17:50:27

1

回复
1

2023-09-11 19:59:27

555

回复
1

2023-09-11 23:29:35

1

回复
1

2023-09-14 19:49:39

1

回复
1

2023-09-14 23:03:52

555

回复
1

2023-09-15 18:40:09

1

回复
1

2023-09-15 20:47:57

555

回复
1

2023-09-16 03:09:57

1

回复
1

2023-09-23 02:24:23

1

回复
1

2023-09-23 09:50:22

1

回复
1

2023-10-05 06:09:04

1

回复
1

2024-03-13 08:48:25

1

回复
1

2024-07-02 15:32:58

1

回复
1

2024-07-15 18:51:12

1

回复
1

2024-07-16 03:27:16

1

回复
1

2024-07-16 03:27:16

1

回复
1

2024-08-28 05:33:57

1

回复
1

2024-08-28 05:35:00

1

回复
1

2024-08-28 05:36:00

1

回复

做有态度的前端团队

关于移动端垂直居中对齐的几个方法

1、CSS3的transform:translate

2、利用Flexbox

已有 70 条评论

添加新评论

按日期分类