移动端：移动端页面布局

Posted 2021-02-11 guisenbin

移动端页面布局

---

一、 水平居中

1. 行内元素     text-align: center;
2. 块级元素

1 /* 可以采取绝对定位的方式实现 */
2 .center {
3         width: 960px;
4         position: absolute;
5         left: 50%;（25%）
6         margin-left: -480px;
7     }

二、 自适应块级元素水平居中

前面介绍的块级元素居中要求有固定宽度，对于自适应的块级元素就无能为力了

1 /* 借助css3的变形属性Transform来完成 */
2 .content {
3         position: absolute;
4         left: 50%;
5         transform: translateX(-50%);
6     }

三、 行内元素垂直居中

1. 单行文本的垂直居中
• 元素的高度和行高相等时，文本呈现垂直居中
2. 多行文本的垂直居中
• 不固定高度的垂直居中    通过设置padding实现
• 固定高度的垂直居中       使用display设置为table，配合样式vertical-align设置为middle来实现

四、 块级元素的垂直居中

 1 /* 固定宽高的垂直居中 */
 2 .content {
 3         width: 100px;
 4         height: 100px;
 5         position: absolute;
 6         left: 50%;
 7         top: 50%;
 8         margin-left: -50px;
 9         margin-top: -50px;
10     }
11 /* 不固定宽高的垂直居中 */
12 .content {
13        position: absolute;
14         left: 50%;
15         top: 50%;
16         /* 左/上边缘向左/上移动自身宽/高度的一半 */
17         transform: translate(-50%, -50%);
18     }

五、 基于Flex实现垂直居中

1 /* 移动端开发中最佳的解决方案 */
2 .content {
3         /*转为flex弹性盒布局*/
4         display: flex;
5         /*主轴上的对齐方式为居中*/
6         justify-content: center;
7         /*交叉轴上对齐方式为居中*/
8         align-items: center;
9     }