新弹性盒水平垂直居中参考:http://www.cnblogs.com/ooo0/p/7562884.html

新旧弹性盒样式参考:http://www.cnblogs.com/ooo0/p/7562906.html

移动端利用-webkit-box水平垂直居中

-webkit-box的属性：
-webkit-box-orient(父):horizontal在水平行中从左向右排列子元素；vertical从上向下垂直排列子元素。
-webkit-box-pack(父):start水平居左对齐；end水平居右对齐；center水平居中；justify两端对齐。
-webkit-box-align(父):start居顶对齐；end居底对齐；center垂直居中；stretch拉伸到与父容器等高。
-webkit-box-flex(子):用来让子容器针对父容器的宽度按一定规则进行划分。

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <link href="../../flex.css" rel="stylesheet" />

        <style type="text/css">

            .outer {

                height: 200px;

                border: 1px #F2DEDE solid;

            }

            .flex {

                display: box; /*旧弹性盒布局*/

            }

            .ai-c {

                -webkit-box-align: center;/*水平居中*/

            }

            .jc-c {

                -webkit-box-pack: center; /*垂直居中*/

            }

        </style>

    </head>

    <body>

        <div class="outer flex ai-c jc-c">

            <div class="inner" style="background: #DFF0D8;width:40px;height:50px;">left</div>

            <div class="inner" style="background: #D9EDF7;width:60px;height:80px;">middle</div>

            <div class="inner" style="background: #FCF8E3;width:40px;height:50px;">right</div>

        </div>

    </body>

</html>

效果:

参考地址:

http://www.cnblogs.com/mywaystrech/p/4849260.html

移动端利用-webkit-box水平垂直居中(旧弹性盒)的更多相关文章

  1. css3水平垂直居中（不知道宽高同样适用）

    css水平垂直居中 第一种方法: 在父div里加: display: table-cell; vertical-align: middle; text-align: center; 内部div设置: ...

  2. 移动端利用-webkit-box水平垂直居中

    首先,必须要在父元素上用display:-webkit-box. 一.box的属性: 1.box-orient 用于父元素,用来确定父容器里子容器的排列方式,是水平还是垂直. horizontal在水 ...

  3. 移动端css水平垂直居中

    水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. <div class="box"> <div class="conte ...

  4. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  5. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  6. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  7. 你知道CSS实现水平垂直居中的第10种方式吗？

    你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

  8. 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...

  9. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

随机推荐

  1. ssm项目跨域访问

    最近使用ssm开发了一个项目,为了项目的开发速度,采用的是前后端同时开发,所以前端文件没有集成在项目中,最后在调试时涉及到了跨域.跨域的解决方法很多,我采用的是最简单的一种,代码如下: 新建一个过滤器 ...

  2. 994.Contiguous Array 邻近数组

    描述 Given a binary array, find the maximum length of a contiguous subarray with equal number of 0 and ...

  3. win10查看无线密码

  4. C# Note3:大话Ninject

    前言 之所以研究Ninject,是因为初入职在开发XX项目的ComponentService部分时用到了它,一下子发现了它的强大.渐渐地发现在项目中,有时会用到优秀的第三方开源库,这些都是前人智慧的结 ...

  5. python数学第五天【常用概率分布】

    1. 概率基本公式 思考题: 3. 两点分布 4. 二项分布 推论一: 5.柏松分布 6. 均匀分布 7. 指数分布 8. 正态分布 9.常见分布的总结

  6. sql查询(转）

    http://www.51testing.com/html/41/n-4421541.html 1 负向条件查询(例如:!=.not in.not exists)都是不能使用索引,少用 可以使用:se ...

  7. ABP 番外篇-菜单

    public class LearningMpaAbpNavigationProvider : NavigationProvider { public override void SetNavigat ...

  8. 学习 Spring (十五) Advisor

    Spring入门篇 学习笔记 advisor 就像一个小的自包含的方面,只有一个 advice 切面自身通过一个 bean 表示,并且必须实现某个 advice 接口,同时 advisor 也可以很好 ...

  9. MySQL数据库安装配置

    1,下载MySQL 打开MySQL的官网www.mysql.com,发现有一个DOWNLOADS 点击它,进入到MySQL的下载页面,在页面的底部有一个MySQL Community Edition, ...

  10. hdu-1058（map)

    题意:输出第n个能拆分成由,2,3,5,7中的一个或者多个组成的数: 解题思路:a[i+1]=a[i]*2;a[i+2]=a[i]*3;a[i+3]=a[i]*5;a[i+4]=a[i]*7;然后把重 ...