只要设置元素的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. UML_用例图

    用例图主要用来描述"用户.需求.系统功能单元"之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图所包 ...

  2. yum lamp for Centos6.4

    1,Centos6.4  yum lamp#!/bin/sh<<cat#echo Ruiy!#Create by Ruiy on 2015-03-27----cat yum install ...

  3. SQL Server中的临时表和表变量

    SQL Server中的临时表和表变量 作者:DrillChina出处:blog2008-07-08 10:05 在SQL Server的性能调优中,有一个不可比拟的问题:那就是如何在一段需要长时间的 ...

  4. Linux系统的简介及Linux系统的安装

    一.写在前面  本文仅仅对Linux系统进行简要的概述已经对Linux系统的安装进行简要的介绍 二.完成目标 1.Linux操作系统的基本概念 2.Linux系统的安装 三.基本概念 1.什么是操作系 ...

  5. javascript必知必会之prototype

    本博客所有内容采用 Creative Commons Licenses 许可使用. 引用本内容时,请保留 朱涛, 出处 ,并且 非商业 . 点击 RSS 进行订阅.(推荐使用 google reade ...

  6. android: ListView历次优化

    第一版: ListView一屏显示多少对象其内部就创建多少View对象.滑动时退出的缓存对象留给滑进去时调用getView传的convertView.因为如果每次都findViewById查找创建视图 ...

  7. Oracle Dataguard三种保护模式概述(转)

    Oracle的DataGuard技术有三种实现模式,分别是max performance.max availability.max protection这三种模式. 以下是来自Oracle文档的摘要信 ...

  8. global变量

    在函数体内定义的global变量,函数体外可以使用,在函数体外定义的global变量不能在函数体内使用, $global $a; $a=123; function f() { echo $a; //错 ...

  9. getpwuid()函数

    linux getpwuid 得到指定用户信息 和系统数据相关的passwd 结构 和系统数据相关的一个结构passwd定义如下 /* The passwd structure. */ struct ...

  10. android 连接网络的简单实例

    1.android有两种连接网络的类HttpURLConnect和HttpClient,但是HttpClient已逐渐被HttpURLConnect类代替所以就不提及. 2.实例 String add ...