老版本语法

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. 参加:白帽子活动-赠三星(SAMSUNG) PRO....

    参加:白帽子活动-—赠三星(SAMSUNG) PRO.... Everybody~小i在这里提前祝大家国庆假期愉快,咱们期待已久的国庆活动终于开始拉,下面进入正题,恩,很正的题! 活动地址:http: ...

  2. SharePoint 2010 ——自定义上传页面与多文件上传解决方案

    最近项目遇到一个很麻烦的问题,原以为很容易解决,结果搞了那么久,先开个头,再慢慢写 SharePoint 2010 ——自定义上传页面与多文件上传解决方案 1.创建Sharepoint空白项目,创建应 ...

  3. 数组拷贝 copyOf()

    Arrarys类的copyof方法与copyOfRange方法可以实现对数组的复制,前者是复制数组到指定的长度,后者将指定的长度复制到一个新数组中. 1.copyOf()方法 该方法提供了很多种重载形 ...

  4. 用thinkPHP实现验证码的功能

    许多系统的登录都有验证码,而如果使用thinkPHP框架搭建网站的话,验证码的生成和验证就比较容易了 1.生成验证码 thinkPHP有对应生成验证码的方法 要使用验证码,需要导入扩展类库中的ORG. ...

  5. Windows平台的Eclipse-javaEE-mars相关配置

    平台:winddow10 前提: 1>  搭建好了jdk1.8.0_60环境 2>  下载放置好了apache-tomcat-8.0.24 3>  下载好了eclipse-jee-m ...

  6. 27个提升效率的iOS开源库推荐

    DZNEmptyDataSet(UI,空表格视图解算器) PDTSimpleCalendar(UI,drop-in日历组件) MagicalRecord(实施活跃记录模式的Core Data助手) C ...

  7. Swift随记

    进一步理解swift拆包和解包(如有问题,大神请指教):!作用是拆包,?作用是压包(也许没有压包这个词,实际上就是转为optional类型),不管是!还是?其实都是类型转换的过程.swift语言在类型 ...

  8. (android) SharedPreferences 两种方式的存储范围

    1 SharedPreferences settings =Activity.getPreferences(Activity.MODE_PRIVATE); 访问数据的范围为 当前的activity 2 ...

  9. Asp.net 页面访问模板页的属性

    首先 页面需要添加下面一段代码 <%@ MasterType VirtualPath="~/User/User.Master" %> 添加的位置如图 这样就可以在这个页 ...

  10. SQL 递归查询(根据指定的节点向上获取所有父节点,向下获取所有子节点)

    --------------------01.向上查找所有父节点-----------------WITH TEMP AS (SELECT * FROM CO_Department WHERE ID= ...