新弹性盒水平垂直居中参考: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. 将选中项的value值赋给select的title

    $('select').change(function () { $(this).attr("title",$(this).find("option:selected&q ...

  2. K3BOM跳层

    A自制件,B自制件,C外购件 ,结构为A-B-C 如果需要跳层,则设置A-B跳层,B-C跳层,则生成A计划订单,C计划订单, 假设单独A-B跳层,则MRP运算出的结果也是A计划订单,B计划订单,C计划 ...

  3. 字符串正则替换replace第二个参数是函数

    zepto中 //将字符串转成驼峰式的格式 camelize = function (str) { return str.replace(/-+(.)?/g, function (match, chr ...

  4. python爬虫之scrapy文件下载

    我们在写普通脚本的时候,从一个网站拿到一个文件的下载url,然后下载,直接将数据写入文件或者保存下来,但是这个需要我们自己一点一点的写出来,而且反复利用率并不高,为了不重复造轮子,scrapy提供很流 ...

  5. Pyspark spark-submit 集群提交任务以及引入虚拟环境依赖包攻略

    网上提交 scala spark 任务的攻略非常多,官方文档其实也非常详细仔细的介绍了 spark-submit 的用法.但是对于 python 的提交提及得非常少,能查阅到的资料非常少导致是有非常多 ...

  6. mysql常用运算符

    一.算数运算符 + 加法 - 减法 * 乘法 / 除法 % 返回余数 二.比较运算符 = 等于 <>或!= 不等于 <=> 等于(这里是安全的等于 例如: select nul ...

  7. 安装使用阿里云的yum源

    CentOS 1.备份(备份本地Yum源) mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.下 ...

  8. String、StringBuffer、StringBuilder三种类型的一点比较

    简要记一点 以运行速度来说: StringBuilder>StringBuffer>String 以线程安全来说: StringBuilder线程不安全,而StringBuffer线程安全 ...

  9. eclipse中将Java项目转换为JavaWeb项目

    eclipse导入一些war项目后,会以java项目形式存在,因此我们需要将java项目转换成web项目,不然项目也许会报错. 1.右键已经导入的项目,选择properties. 2.选中projec ...

  10. Eclipse配置C++时的三个关键环境变量

    ECLIPSE下载很简单,然后装上MinGW,安装就完成了,关键是要配置三个环境变量 include——C:\MinGW\include lib——C:\MinGW\lib path——C:\MinG ...