移动端页面布局
一、 水平居中
- 行内元素 text-align: center;
- 块级元素
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 }三、 行内元素垂直居中
- 单行文本的垂直居中
- 多行文本的垂直居中
- 不固定高度的垂直居中 通过设置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 }
