老版本语法

div{

display: -webkit-box;
-webkit-box-align:center; //垂直居中
-webkit-box-pack:center;//水平居中

}

新版本语法

div{

display: -webkit-flex;

-webkit-align-items: center;

align-items: center;//垂直居中

-webkit-justify-content: center;

justify-content: center;//水平居中

}

混合版本语法

div{

display: -ms-flexbox; /* 混合版本语法: IE 10 */

 -ms-flex-pack: center; //水平居中

-ms-flex-align: center; //垂直居中

}

 

通过box盒子模型给元素内容设置居中的更多相关文章

  1. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  2. 浅谈 css3 box盒子模型以及box-flex的使用

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

  3. 牛腩新闻发布系统(三):CSS盒子模型及其基本内容

    导读: 这些天一直在做牛腩的网页,比如什么首页.出错页.新闻内容页等.在学习的不断推进中,一些刚开始理解的不是很好的东西,也逐渐的深刻了起来.下面,就对这一段时间的学习,做一个总结.主要总结内容有:盒 ...

  4. HTML+CSS教程(五)外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出

    一.外联样式 通过link标签引入外部css文件夹中的xxx.css文件到head标签中 例: 二. 1.组选择器 选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: & ...

  5. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  6. CSS的盒子模型(Box Model)

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...

  7. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  8. CSS 设计彻底研究(三)深入理解盒子模型

    第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“ ...

  9. 深入理解CSS系列(一):理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

随机推荐

  1. HTML5离线缓存Manifest

    web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over. 什么是manifest? 简 ...

  2. 常用 windows运行命令

    winver---------检查Windows版本 wmimgmt.msc----打开windows管理体系结构(WMI) wupdmgr--------windows更新程序 wscript--- ...

  3. Android表单UI及相应控件的事件处理

    一.Toast Toast是一种轻量级的提示工具,可显示一行文本对用户的操作进行提示响应 用法:Toast.makeText(context,text,time).show(); context:上下 ...

  4. JSP page指令详解

    JSP指令用来设置整个JSP页面相关的属性,如网页的编码方式和脚本语言. 语法格式如下: <%@ directive attribute="value" %> 指令可以 ...

  5. Python数据结构与算法--算法分析

    在计算机科学中,算法分析(Analysis of algorithm)是分析执行一个给定算法需要消耗的计算资源数量(例如计算时间,存储器使用等)的过程.算法的效率或复杂度在理论上表示为一个函数.其定义 ...

  6. iOS设计模式-单例模式

    (一)什么是单例模式(Singleton) 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点 *最初的定义是在<设计模式>(Addison-Wesley)中 解读 1> ...

  7. Silverlight项目笔记1:UI控件与布局、MVVM、数据绑定、await/async、Linq查询、WCF RIA Services、序列化、委托与事件

    最近从技术支持转到开发岗,做Silverlight部分的开发,用的Prism+MVVM,框架由同事搭好,目前做的主要是功能实现,用到了一些东西,侧重于如何使用,总结如下 1.UI控件与布局 常用的主要 ...

  8. iOS开发之UIImage等比缩放

    iOS开发之UIImage等比缩放 评论功能真不错 评论开通后,果然有很多人吐槽.谢谢大家的支持和关爱,如果有做的不到的地方,还请海涵.毕竟我一个人的力量是有限的,我会尽自己最大的努力大家准备一些干货 ...

  9. javascript的模块化解读

    AMD是RequireJS在推广过程中对模块定义的规范化产出. 异步加载模块,依赖前置,提前执行. Define定义模块 define(['require','foo'],function(){ret ...

  10. 记录JVM垃圾回收算法

    垃圾回收算法可以分为三类,都基于标记-清除(复制)算法: Serial算法(单线程) 并行算法 并发算法 JVM会根据机器的硬件配置对每个内存代选择适合的回收算法,比如,如果机器多于1个核,会对年轻代 ...