display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex; /* 水平居中*/
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-pack:center;/* IE 10 */ -webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;/* IE 11+,Firefox 22+,Chrome 29+,Opera 12.1*/ /* 垂直居中 */
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-align:center;/* IE 10 */ -webkit-align-items: center;
-moz-align-items: center;
align-items: center;

css flexbox水平垂直的更多相关文章

  1. CSS 布局 - 水平 & 垂直对齐

    CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...

  2. CSS:CSS 布局 - 水平 & 垂直对齐

    ylbtech-CSS:CSS 布局 - 水平 & 垂直对齐 1.返回顶部 1. CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个 ...

  3. CSS实现水平垂直同时居中的5种思路

    × 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...

  4. CSS实现水平垂直同时居中的6种思路

    前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...

  5. margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架

    有这么一个题目: 使用重构的方式制作出一个如下图的水平.垂直都居中短边为50px,长边为150px的红色十字架. 要求只使用2个div完成 答案: <!DOCTYPE html PUBLIC & ...

  6. css 元素水平垂直方向居中

    html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...

  7. CSS div水平垂直居中和div置于底部

    一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...

  8. CSS 布局水平 & 垂直对齐

    元素居中对齐 margin: auto; 文本居中对齐 text-align: center; 图片居中对齐 要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中 左右对齐 ...

  9. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

随机推荐

  1. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  2. android:installLocation = "auto" 的用法

    在Froyo(android 2.2,API Level:8)中引入了android:installLocation.通过设置该属性可以使得开发者以及用户决定程序的安装位置. android:inst ...

  3. 使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件(转)

    Mybatis属于半自动ORM,在使用这个框架中,工作量最大的就是书写Mapping的映射文件,由于手动书写很容易出错,我们可以利用Mybatis-Generator来帮我们自动生成文件. 1.相关文 ...

  4. Git学习笔记 git revert

    我们难免会因为种种原因执行一些错误的commit / push,git提供了revert命令帮助程序员修复这样的错误. 举个例子,下图是git commit 的历史记录 git revert 命令会通 ...

  5. Quartz:Cron Expressions

    原文地址:http://www.quartz-scheduler.net/documentation/quartz-2.x/tutorial/crontrigger.html 注意: 位也可能是7位, ...

  6. SQLite密码添加移除

    背景:电脑清理--个人洁癖 SQLite的最原始的是没有加密的,从而衍生了多种加密算法,但在平常使用中使用System.Data.Sqlite,但其加密后,一般都需要要单独的sqlite管理器--像我 ...

  7. MySQL的中文编码问题

    创建表格时,怎么让表格显示中文?注意:不区分大小写 mysql> ALTER TABLE 表格的名字 CONVERT TO CHARACTER SET UTF8; 怎么让默认的数据库支持中文字符 ...

  8. 用ajax和js怎么做出滚动条滚到最下面分页

    获取滚动条位置(scrollTop) 获取可视窗口高度(viewportHeight) 获取整个页面可滚动高度(scrollHeight) 当scrollTop+viewportHeight==scr ...

  9. 性能测试-ORACLE性能监控

    通过lr做性能测试的过程,通过监控Oracle数据库的性能 采用的监控工具:PeOny PeOny安装 1. 安装服务端 1) LINUX平台安装 解压缩peony3.x.0.x.tar.gz文件,b ...

  10. javascript同名变量

    我写个流程:在流程之前,必须写一下标识符是啥. 一句话,就是variable object的属性.而这个对象会被不同执行环境来决定. 比如全局环境下的variable object 就是 global ...