1. display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
  2.  
  3. /* 水平居中*/
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-pack:center;/* IE 10 */
  4.  
  5. -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;/* IE 11+,Firefox 22+,Chrome 29+,Opera 12.1*/
  6.  
  7. /* 垂直居中 */
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-align:center;/* IE 10 */
  8.  
  9. -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. webservice 简单入门 (NLY)

    1,创建webservice服务器端 搭建网站,创建webservice webservice.cs中的代码 namespace WebApplication1 { /// <summary&g ...

  2. linux查看常用操作

    linux下查看文件夹以及文件的大小: df命令可以显示目前所有文件系统的可用空间及使用情形 df -h Filesystem Size Used Avail Use% Mounted on /dev ...

  3. AlwaysOn的认识与相关理解

    AlwaysOn技术的简要说明: SQL Server2012所支持的AlwaysOn技术集中了故障转移群集.数据库镜像和日志传送三者的优点,但又不相同.故障转移群集的单位是SQL实例,数据库镜像和日 ...

  4. C#学习笔记----.net操作进程

    进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法直接访问另一个进程的数据(除非分布式),一个进程运行的失败也不会影响其他 ...

  5. Linux snmp

    http://www.cnblogs.com/amberly/p/4364072.html http://blog.csdn.net/awenluck/article/details/50220221

  6. java的final用法

    转自:http://blog.163.com/maomaoyu_1012/blog/static/19060130520116269329894/ 1.         修饰基础数据成员的final ...

  7. Linux 标准目录结构

    初学Linux,首先需要弄清Linux 标准目录结构 / root --- 启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home --- 存储普通用户的个人文件 ftp ...

  8. Java 初学记录之一 快速输入

    1. sysout 按回车 System.out.println();

  9. HR外包系统 - 客户公司薪资规则 报表需求 记入系统

    1 薪酬规则,包括 常用薪资项目 2 报表需求,特别是报表排序规则 3 特殊项说明记录 另外包括客户公司监控的日期设置

  10. 【转】GeoHash核心原理解析

    好久没更新过博客了,先转载一篇文章吧. 源地址:http://www.cnblogs.com/LBSer/p/3310455.html 引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按 ...