首先，必须要在父元素上用display:-webkit-box.

一、box的属性：

1.box-orient 用于父元素，用来确定父容器里子容器的排列方式，是水平还是垂直。

horizontal在水平行中从左向右排列子元素；vertical从上向下垂直排列子元素。

horizontal:    vertical:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>webkit-box</title>

    <style>

        .father{

            display: -webkit-box;

            -webkit-box-orient:horizontal;

            background-color: #f4f4f4;

            height: 800px;

        }

        /*vertical*/

        .father{

            display: -webkit-box;

            -webkit-box-orient:vertical;

            background-color: #f4f4f4;

            height: 800px;

        }

        .child1{

            background-color: red;

            color: #f4f4f4;

            font-size: 100px;

        }

        .child2{

            background-color: yellow;

            color: green;

            font-size: 200px;

        }

        .child3{

            background-color: blue;

            color: #f4f4f4;

            font-size: 100px;

        }

    </style>

</head>

<body>

<div class="father">

    <div class="child1">1</div>

    <div class="child2">2</div>

    <div class="child3">3</div>

</div>

</body>

</html>

2.box-pack 用于父元素，用来确定父容器里子容器的水平对齐方式。

start水平居左对齐；end水平居右对齐；center水平居中；justify两端对齐。

start:    end:

center:     justify:

.father{

            display: -webkit-box;

            -webkit-box-orient:horizontal;

            -webkit-box-pack: center;

            background-color: #f4f4f4;

            height: 800px;

        }

3.box-align 用于父元素，用来确定父容器里子容器的垂直对齐方式。

start居顶对齐；end居底对齐；center垂直居中；stretch拉伸到与父容器等高。

start:    end:

center:    stretch:

.father{

            display: -webkit-box;

            -webkit-box-orient:horizontal;

            -webkit-box-align: stretch;

            background-color: #f4f4f4;

            height: 800px;

        }

4.box-flex 用于子元素，用来让子容器针对父容器的宽度按一定规则进行划分。

.father{

            display: -webkit-box;

            -webkit-box-orient:horizontal;

            -webkit-box-align: stretch;

            background-color: #f4f4f4;

            height: 800px;

        }

        .child1{

            background-color: red;

            color: #f4f4f4;

            font-size: 100px;

            -webkit-box-flex:;

        }

        .child2{

            background-color: yellow;

            color: green;

            font-size: 200px;

            -webkit-box-flex:;

        }

        .child3{

            background-color: blue;

            color: #f4f4f4;

            font-size: 100px;

            -webkit-box-flex:;

        }

二、水平垂直居中

.father{

            display: -webkit-box;

            -webkit-box-orient:horizontal;

            -webkit-box-pack: center;

            -webkit-box-align: center;

            background-color: #f4f4f4;

            height: 800px;

        }

        .child1{

            background-color: red;

            color: #f4f4f4;

            font-size: 100px;

        }

        .child2{

            background-color: yellow;

            color: green;

            font-size: 200px;

        }

        .child3{

            background-color: blue;

            color: #f4f4f4;

            font-size: 100px;

        }

移动端利用-webkit-box水平垂直居中的更多相关文章

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

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

  2. 移动端利用-webkit-box水平垂直居中(旧弹性盒)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. ElasticSearch实践系列(一)：安装

    Elasticsearch简介 Elasticsearch是一个高度可扩展的开源全文搜索和分析引擎.它允许您快速,近实时地存储,搜索和分析大量数据.它通常用作底层引擎/技术,为具有复杂搜索功能和要求的 ...

  2. PHP实现验证码制作

    captcha.php(PHP产生验证码并储存Session): <?php //开启Session session_start(); //绘制底图 $image = imagecreatetr ...

  3. CrackMe005-下篇 | 逆向破解分析 | 160个CrackMe（视频+图文）深度解析系列

    作者:逆向驿站微信公众号:逆向驿站知乎:逆向驿站 CrackMe005,上篇说了具体方法,下篇来发逆向分析过程,看看老夫是如何得到上篇的具体方法的! 准备 [环境和工具] win7/xp虚拟机环境 C ...

  4. 容斥原理I

    普利斯记号 以下以"人"代指受条件约束的元素. \(K(x)\)表示刚好\(x\)人满足条件的方案数. \(S(x)\)表示至少\(x\)人满足条件的方案数. \(C(x)\)表示 ...

  5. 11.14 Daily Scrum

    实现推荐菜谱时遇到问题,这个功能要和数据库和服务器有关,所以暂时放在一边,可能在beta版本实现. 部分成员已经完成基本任务,进行完善.   Today's Task Tomorrow's Task ...

  6. BugPhobia回顾篇章：团队Beta 阶段工作分析

    0x00:序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet yo ...

  7. Linux内核及分析 第六周 分析Linux内核创建一个新进程的过程

    实验过程 1.github上克隆相应的mengning/menu.git 2.测试menuOS,测试fork直接执行结果 3.配置调试系统,进入gdb调试,利用file linux-3.18.6/vm ...

  8. Java实验二

    北京电子科技学院(BESTI) 实     验    报     告 课程:Java程序设计 班级:1351    姓名:黄君如  学号:20135117 成绩:             指导教师:娄 ...

  9. 《Linux内核设计与实现》第三章读书笔记

    一.进程(任务)描述 1.进程是处于执行期的程序:除了可执行程序代码,还包括打开的文件.挂起的信号.内核内部数据.一个或者多个执行线程等多种资源 线程是在进程活动中的对象:内核调度的对象是线程而不是进 ...

  10. 《软件工程》小组团队项目-小学生四则运算APP（First Sprint）

    <软件工程>团队项目我们小组选择了小学生四则运算APP,在上学期原有的项目基础上进行更新升级.(自我感觉我们团队上学期的小学生四则运算APP是较为成功且实用的,不过这学期学习到了新的知识, ...