移动端页面布局

一、 水平居中

  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. 单行文本的垂直居中
  • 元素的高度和行高相等时，文本呈现垂直居中
  • 多行文本的垂直居中
    • 不固定高度的垂直居中    通过设置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     }

     

     

     

     

     

     

    版权声明：本文为guisenbin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
    本文链接：https://www.cnblogs.com/guisenbin/p/10454409.html