新弹性盒水平垂直居中参考: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. javax.validation.ValidationException: Unable to create a Configuration, because no Bean Validation provider could be found. Add a provider like Hibernate Validator (RI) to your classpath.

    项目依赖 <dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifa ...

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

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

  3. Node & CLI

    Node & CLI cli 生成文件的原理是什么 https://nodejs.org/api/cli.html http://nodejs.cn/api/cli.html CLI & ...

  4. Laravel从入门到精通

    1. Laravel框架的下载安装 例如: 在D:\test\laravel目录下新建一个目录为test_laravel 第一步,下载laravel框架 在D:\test\laravel\test_l ...

  5. css繼承

    概念:就是上級設置了css屬性,下級默認有同樣的樣式,如果下級需要不一樣的樣式,那麼就需要單獨對下級設置. 範圍: font-family:字體 font-weight:粗細 font-size:尺寸 ...

  6. Java多线程之定时任务（Timer）

    package org.study2.javabase.ThreadsDemo.schedule; import java.util.Date; import java.util.Timer; imp ...

  7. ubuntu16.04下 搭建 lnmp 环境

    apt-get install nginx apt-get php7.-mysql apt-get install mysql 编辑nginx配置文件 vim /etc/nginx/sites-ena ...

  8. Winform实现多线程异步更新UI（进度及状态信息）

    引言 在进行Winform程序开发需要进行大量的数据的读写操作的时候,往往会需要一定的时间,然在这个时间段里面,界面ui得不到更新,导致在用户看来界面处于假死的状态,造成了不好的用户体验.所以在大量数 ...

  9. mvc 学前必知

    MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性.可移植性,代码的可 ...

  10. Web API 2 使用SSL

    在Server上启用SSL 稍后我会想在IIS 7 上配置SSL,现在先往下看. 本地测试,您可以启用SSL的IIS Express Visual Studio.在属性窗口中,启用SSL设置为True ...