首先，必须要在父元素上用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. C. Ehab and a 2-operation task

    链接 [https://codeforces.com/contest/1088/problem/C] 题意 n个数,最多n+1操作,要么前i个数加x,要么前i个数对x取余,最后使得严格递增 分析 直接 ...

  2. 【2016.4.6】结对编程 终章 THE END

  3. linux及安全第三周总结——跟踪分析LINUX内核的启动过程

    linux内核目录结构 arch目录包括了所有和体系结构相关的核心代码.它下面的每一个子目录都代表一种Linux支持的体系结构,例如i386就是Intel CPU及与之相兼容体系结构的子目录.PC机一 ...

  4. android开发之Tabhost刷新

    在android中,使用tabHost的时候,如果tab被点击,该tab所对应的activity被加载了,从别的tab切换回来的时候,activity不会再次被创建了(onCreate),所以要想每次 ...

  5. hover设定触发时间间隔

    500毫秒执行一次 $(".banner_menu_content li a").hover(function(){ var aa=$(this).text().trim(); s ...

  6. OSG中距离转像素公式（PIXEL_SIZE_ON_SCREEN）

    osgearth_computerangecallback.cpp 中 下面的代码假设:range模式是PIXEL_SIZE_ON_SCREEN,根据距视点的距离计算在屏幕中的像素大小. 像素大小转距 ...

  7. Hibernate_core_method

    /** * Created by Administrator on 2015/11/30. *HibernateUtil */public class HibernateUtil { private ...

  8. Java基础知识中的注意事项

    设置Java的相关路径,举例: JAVA_HOME  -->   C:\Program Files\Java\jdk1.8.0_191 Path --->   C:\Program Fil ...

  9. docker网络调试过程

    #1: 添加永久网桥 vi /etc/sysconfig/network-scripts/ifcfg-br0 DEVICE=br0 TYPE=Bridge BOOTROTO=static IPADDR ...

  10. Docker 部署Gitlab

    sudo docker run -d \ -h 192.168.16.88 \ -p 89:80 -p 23:22 \ --name gitlab \ --restart always \ --vol ...