新弹性盒水平垂直居中参考: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. 深浅copy详解

    一. 前言 在python中,对象的赋值和深浅copy,是有差异的.最终得的值也不同,下面我们就通过几个例子,来看下它们之间的区别. 二. 赋值 list2 = ["jack",2 ...

  2. hive条件函数

    case相当于if,when相当于=:then是条件满足的结论.否则实行else后语句,一end结束

  3. Kettle 变量（arg位置参数）

    1.表输入中使用?占位作为kettle转换变量 数据预览: 获取变量数据: 使用?传入变量 需要勾选替换sql语句中的变量,并选则从步骤插入数据中所在步骤 数据预览

  4. Django的一些操作与视图函数

    一 . Django的安装 pip install django==1.14.6 # 后面的数字是django的版本 二 .  通过命令行(cmd)来创建Django项目 1. 切换到保存项目的文件夹 ...

  5. 【转】 Golang输入输出格式化Printf Springf Fprintf..

    // Go 在传统的`printf` 中对字符串格式化提供了优异的支持. // 这里是一些基本的字符串格式化的人物的例子. package main import "fmt" im ...

  6. uwsgi加nginx部署django restframework前后端分离项目

    一.uwsgi和nginx简介 1.uwsgi(摘抄于百度百科): uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中HttpUwsgiModule的作用是与 ...

  7. 用python写一个预警机器人（支持微信和钉钉）

    背景 线上的系统在运行中,发生故障时怎么及时的通过手机通知到相关人员?当然这是个很简单的需求,现有的方法有很多,例如: 如果我们用的云产品,那么一般都会有配套对应的监控预警功能,根据需要配置一下即可, ...

  8. mvc学习过程碰到问题

    Fluent API配置 单例模式+Autofac 批量注入

  9. EChart.js 笔记二

    交互组件 Echart.js 中交互组件比较多.例如: legend(图例).title(标题组件).visualMap(视觉映射组件).dataZoom(数据缩放组件).timeline(时间线组件 ...

  10. codeforces509B

    Painting Pebbles CodeForces - 509B There are n piles of pebbles on the table, the i-th pile contains ...