移动端页面布局

水平居中

第一种:行内元素

text-align: center;

第二种: 1- 块级元素(需要固定的尺寸来实现)

可以采取绝对定位的方式实现

div {

        width: 960px;

        height:500px

        position: absolute;

        left: 50%;

        margin-left: -480px;

}

2-固定尺寸的块元素实现水平居中(不用计算margin的值)

还是需要宽高的,将绝对定位的值都设为0.就可以实现

div{

            background : yellowgreen ;

            /* 在不可以使用css3变形和flex布局的情况下，怎么办呢？ */

            /* 需要盒子有宽高，但是不需要去计算偏移盒子的宽高 */

            position : absolute ;

            left : 0 ;

            top : 0 ;

            right : 0 ;

            bottom : 0 ;

            margin : auto ;

            width : 300px ;

            height : 300px ;

        }

第三种:自适应块级元素水平居中

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

借助css3的变形属性Transform来完成

.content {

        position: absolute;

        left: 50%;

         top:50%

       transform: translate(-50%,-50%);(表示移动自身的一半)

    }

第四种:1-基于Flex实现垂直居中(重点是父亲要有宽高)

移动端开发中最佳的解决方案

div {

         /*转为flex弹性盒布局*/

        display: flex;

        /*x主轴上的对齐方式为居中*/

        justify-content: center;

        /*y交叉轴上对齐方式为居中*/

        align-items: center;

    }

2-不固定高度的时候,使用padding来让文字居中,与text-align:justify(两端对齐)来实现垂直居中.

3-使用display设置为table，配合样式vertical-align设置为middle来实现

<table  border = "1" >

        <tr>

            <td  style = "width: 500px;height: 200px;text-align: center;" >

                行内元素的水平居中和垂直居中行内元素的水平居中和垂直居中

            </td>

        </tr>

</table>

可以替换为: div {

            height : 200px ;

            width : 300px ;

            border : 1px  solid  red ;

            text-align : center ;

            /* 固定高度的垂直居中

           使用display设置为table，配合样式vertical-align设置为middle来实现*/

            display : table ;

        }

        span {

            display : table-cell ;

            vertical-align : middle ;

        }

    </style>

    <div>

        <span> 行内元素的水平居中和垂直居中行内元素的水平居中和垂直居中行内元素的水平居中和垂直居中 </span>

    </div>