只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持，要设置垂直居中的话只需要将这两个属性的值都设置为center即可，需要的朋友可以参考下
 
以前处理垂直居中用的方法是设置div的height和line-height是一样的值，现在就不用那么麻烦了。只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持。其中box-pack控制的是水平的左和右，取值有：start(居左)，center(居中)，end(居右)。box-align的取值有：start(居上)，center(居中)，end(居下)。如果我们要设置垂直居中的话只需要将这两个属性的值都设置为center即可。当然了，这个前提是使用css3的盒布局，即将外层元素的display设置为box

复制代码

代码如下:

<style type="text/css">
#container{
display: box;
display: -webkit-box;
display: -moz-box;
width:800px;
height: 200px;
border: 1px solid #ccc;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}
#div1{
background: orange;
}
#div2{
background: yellow;
}
#div3{
background: green;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">列1</div>
<div id="div2">列2</div>
<div id="div3">列3</div>
</div>
</body> 

css3设置box-pack和box-align让div里面的元素垂直居中的更多相关文章

  1. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  2. CSS3弹性伸缩布局(一)——box布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  3. css3盒模型学习--利用box自适应布局

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典   的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...

  4. CSS3弹性盒子（Flex Box）

    CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...

  5. Vagrant 手册之 box - 创建基础 box

    原文地址 有一种特殊的 box 被称为"base box".这些 box 包含 Vagrant 运作所需的最低限度,通常不是对现有的 Vagrant 环境("base b ...

  6. 给div设置background-color: rgba(0, 0, 0, 0.2)属性，并加了css3动画--opacity动画淡出动画，之后div子元素的字体会抖一下

    问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...

  7. css3 设置滚动条的样式

    ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-th ...

  8. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  9. 【CSS3】 CSS3:弹性盒子（Flex Box）

    Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...

随机推荐

  1. 【Leetcode】查找二叉树中任意结点的最近公共祖先(LCA问题)

    寻找最近公共祖先,示例如下: 1 /           \ 2           3 /    \        /    \ 4    5      6    7 /    \          ...

  2. flex——将Sprite控件添加到FLEX UI中

    在Flex的帮助文档里,有很多例子都是扩展Sprite类的.如果想把这些实例添加到你的s:Application中,如:addChild(DisplayObject ),肯定会出错.错误的大致意思是: ...

  3. poj1966Cable TV Network(无向图最小点割集 ISAP+邻接矩阵)

    题目请戳这里 邻接表的ISAP被卡了一天...TLE....终于被卡了...好忧桑啊啊啊... 题目大意:给一张无向图,求最少去掉几个点使图不连通. 题目分析:求无向图的点连通度,拆点建图跑最大流.具 ...

  4. Vim应用

    :q!不保存退出 :set number显示行数 :wq保存并退出 ==先输入100,再输入==.从这行开始向下100行,进行自动缩进对齐

  5. 移动端的几款jq插件

    移动手机用户的数量每日都在增长,人们现在都习惯于使用手机来浏览网页,看小说,读新闻.如何确保你的网站对移动用户友好,是目前你需要解决的最重要的问 题之一.这里给大家介绍10款在移动手机上使用的jQue ...

  6. ArrayList、Vactor以及LinkList的区别

    ArrayList:底层数据结构是数组结构,你就可以把它看成是一个可变大小的且只能装对象的数组.因为数组有索引(角标)所以ArrayList的查询速度快,而添加删除元素速度稍慢.因为,你每删除或者添加 ...

  7. oc结构

    结构 在oc中只能声明变量 不能声明函数和类 结构声明 struct DateT { int month; int day; int year; }; 结构可以在起最后的分号之后定义结构变量,并且可以 ...

  8. 5.7.13mysql 无法登陆

    话不多说 用的http://dev.mysql.com/downloads/mysql/下的ZIP  Archive安装方式 下载 解压,然后吧bin目录添加到系统path环境变量下.然后将my-de ...

  9. python基础之 re(正则表达式)模块学习

    今天学习了Python中有关正则表达式的知识.关于正则表达式的语法,不作过多解释,网上有许多学习的资料.这里主要介绍Python中常用的正则表达式处理函数. re.match re.match 尝试从 ...

  10. [Linked List]Rotate List

    Total Accepted: 55428 Total Submissions: 250727 Difficulty: Medium Given a list, rotate the list to ...