Flexbox实现一个div元素在body页面中水平垂直居中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>Flexbox制作CSS布局实现水平垂直居中</title>
  <style type="text/css">
    html {
      height: 100%;
    }

body {
      display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */
      display: -moz-box;    /* 老版本语法: Firefox (buggy) */
      display: -ms-flexbox;  /* 混合版本语法: IE 10 */
      display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
      display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */

/*垂直居中*/  
      /*老版本语法*/
      -webkit-box-align: center;
      -moz-box-align: center;
      /*混合版本语法*/
      -ms-flex-align: center;
      /*新版本语法*/
      -webkit-align-items: center;
      align-items: center;

/*水平居中*/
      /*老版本语法*/
      -webkit-box-pack: center;
      -moz-box-pack: center;
      /*混合版本语法*/
      -ms-flex-pack: center;
      /*新版本语法*/
      -webkit-justify-content: center;
      justify-content: center;

margin: 0;
      height: 100%;
      width: 100% /* needed for Firefox */
    }
    /*实现文本垂直居中*/
    .box {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      width:500px;
      height: 200px;
      background: red;
      color: #fff;
      font-weight: bold;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div class="box">Flexbox制作CSS布局实现水平垂直居中</div>
</body>
</html>

Flexbox制作CSS布局实现水平垂直居中的更多相关文章

  1. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  2. 解读 CSS 布局之水平垂直居中

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

  3. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  4. CSS布局：元素垂直居中

    CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...

  5. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  6. CSS实现元素水平垂直居中—喜欢对称美，这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

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

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

  8. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  9. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

随机推荐

  1. vsftp搭建+虚拟用户

    yum安装vsfpd: [root@localhost ~]# yum -y install vsftpd db4-utils Loaded plugins: fastestmirror, refre ...

  2. php学习笔记2016.1

    基本类型    PHP是一种弱类型语言.      PHP类型检查函数   is_bool()    is_integer()  is_double()  is_string()   is_objec ...

  3. Linux之源码包安装软件

    安装准备      安装c语言编辑器 gcc      压缩包  node-v6.2.0-linux-x64.tar.gz   源码包保存位置  /usr/local/src/ 源码包安装位置 /us ...

  4. Kylin查询性能低下原因分析

    在处理指数行情数据时(IDXD),我遇到一个KYLIN性能查询低下的问题,非常奇怪.经过一番研究发现了其中的原因并顺利解决: 症状: select count(*) from sensitop.idx ...

  5. vc编译 curl 7.36.0

    CURL邮件列表中提到官方最新版本的windows devel包中缺少文件,而我又用不到https,所以我就自己下载源码包来编译了 下载源码包:http://curl.haxx.se/download ...

  6. 《kali linux 渗透测试初级教程》免费下载

    Kali Linux系列教程是在51cto上售卖的入门教程,售价100元.每天都有很多网友找我要全部教程,也有人偷偷的录制了教程.索性公开出来,如果您觉得还可以的话,希望可以选择发个小红包或者转发 获 ...

  7. 学习Scala02 基本类型

    scala中有9大基本类型: Byte .Short .Int .Long. Char .String .Float. Double .Boolean 与java的基本类型看起来基本是一致的,但实际上 ...

  8. 了解了这些才能开始发挥jQuery的威力

    由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery的皮毛,只是使用id选择 ...

  9. IOS 多线程05-OperationQueue 、GCD详解

      注:本人是翻译过来,并且加上本人的一点见解. 1. 开始 目前在 iOS中有两套先进的同步 API 可供我们使用:操作队列OperationQueue和 GCD .其中 GCD 是基于 C 的底层 ...

  10. ./在Linux下是什么意思

    在网上找的答案: . 在这里表示的是当前目录,就像 .. 表示上级目录一样. 这个 / 表示的是目录级别的分隔符,他之前的就是目录名,./aaa/ 表明的就是 . (也就是当前目录)下面的 aaa 目 ...