只要设置元素的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. (译)linux系统关于命令echo的15个例子

    15 Practical Examples of ‘echo’ command in Linux By Avishek Kumar Under: Linux Commands On: August 2 ...

  2. 轻松配置java开发环境

    1.下载java开发常用的IDE(Integrated Development Environment)--eclipse.http://www.eclipse.org/downloads/ 2.下载 ...

  3. C++暂时对象

    C++真正所谓的暂时对象是不可见的--不会在你的源码中出现.仅仅要你产生一个non-heap object而没有为它命名,便诞生了一个暂时对象.此等匿名对象通常发生于两种情况: 一是当隐式类型转换(i ...

  4. swift http请求返回json数据和分析

    1 AppDelegate.swift // // AppDelegate.swift // QQDemo // // Created by 赵超 on 14-6-21. // Copyright ( ...

  5. Tcl 简单介绍及特性

    [简单介绍|特性] l  简单介绍 Tcl是一门产生于80年代末的语言,和Python一样,她是用c开发出来的.假设说C/Java/C++/C#为编译型语言的话,那么Python.Perl和Tcl就是 ...

  6. UIButton 设置字体大小

    btn.frame = CGRectMake(x, y, width, height); [btn setTitle: @"search" forState: UIControlS ...

  7. Sql遍历数据库

    Sql遍历数据库 set nocount on ) ) ) set @str='ad' Declare cur_Depart Cursor For select name,id from syscol ...

  8. eclipse最有用快捷键整理（转）

    eclipse最有用快捷键整理 可以通过菜单栏中Window–>Preferences–>General–>Keys来修改快捷键绑定. 编辑 Ctrl+1 快速修复(最经典的快捷键, ...

  9. VC++客户端 缩小包的尺寸

    图片压缩: 1. 背景图片尺寸一般为100-300KB,使用纯色图片可缩小至1-3KB,方法得当可缩小1M多: 2. .ico一般为100-200KB,16x16一直到256x256,可减去其中几种尺 ...

  10. webpack 多入口配置

    同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html 顺着官网的操作,我们可以本地测试起我们的项目 n ...