只要设置元素的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. C# 导出 excel 复杂格式 html导出

    /// <summary> /// 夜班津贴统计导出 /// </summary> public void ExportOtStat(string data) { var in ...

  2. 顶尖数据挖掘辅助教学套件（TipDM-T6）产品白皮书

          顶尖数据挖掘辅助教学套件 (TipDM-T6)           产  品  说  明  书 广州泰迪智能科技有限公司 版权所有 地址: 广州市经济技术开发区科学城232号 网址: ht ...

  3. OAuth2.0认证介绍

    OAuth2.0鉴权 返回 目录 [隐藏] 1 腾讯微博OAuth2.0认证介绍 2 获取accesstoken的两种方式 2.1 1.Authorization code grant 2.1.1 第 ...

  4. Object-c学习之路七（oc字符串操作）

    // // main.m // NSString // // Created by WildCat on 13-7-25. // Copyright (c) 2013年 wildcat. All ri ...

  5. jvm莫名退出问题解决

    当jvm莫名退出,没有留下任何任何信息的时候,在centos的 /var/log/dmesg文件中,或许可以找到一些端倪

  6. [DevExpress]图表开发工具类 ChartUtils

    /// <summary> /// 基于.NET 3.5的Chart工具类;对应的DevExpress版本:12.1.7; /// </summary> public stat ...

  7. 关于Console的Main(String[] args)参数输入

    之前接触一个往Console里输入参数的项目,资深QA教我怎么run,灰常脸红. 今日无事,baidu之. Step1 写简单Console Code. class Program { static ...

  8. 在Activity中动态设置TextView的隐藏属性

    if (true) { //显示 viewHolder.tvLine.setVisibility(View.INVISIBLE);} else { //不显示 viewHolder.tvLine.se ...

  9. JVM ClassLoader加载过程

    虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是Java虚拟机的类加载机制. 1)三个类加载器: bootstra ...

  10. 《C++ Primer Plus 6th》读书笔记 - 第十章 对象和类

    1. 过程性编程和面向对象编程 2. 抽象和类 1. 使用类对象的程序都可以直接访问公有部分,但只能通过公有成员函数(或友元函数)来访问对象的私有成员 2. 可以在类声明之外定义成员函数,并使其成为内 ...