移动端：移动端页面布局

移动端页面布局

---

一、 水平居中

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

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

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

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

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

三、 行内元素垂直居中

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

四、 块级元素的垂直居中

/* 固定宽高的垂直居中 */
.content {
         100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
/* 不固定宽高的垂直居中 */
.content {
       position: absolute;
        left: 50%;
        top: 50%;
        /* 左/上边缘向左/上移动自身宽/高度的一半 */
        transform: translate(-50%, -50%);
    }

五、 基于Flex实现垂直居中

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