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. 查询指定网段可用IP脚本

    1.脚本内容: #vi hhh 添加以下内容: #!/bin/bash read -p "Please keyin the network segment: (e.g. 10.88.1) & ...

  2. 《理解 ES6》阅读整理：函数（Functions）（六）Purpose of Functions

    明确函数的双重作用(Clarifying the Dual Purpose of Functions) 在ES5及更早的ES版本中,函数调用时是否使用new会有不同的作用.当使用new时,函数内的th ...

  3. 如何让MVC6在IIS上面跑

    asp.net5的MVC6发布出来的结果和MVC5之前版本的相差太远了,直接在本地的IIS服务器上面是不可能运行的. 看了汤姆大叔的MVC6项目发布与部署,讲了很多丰富的知识点.但是对于立即要解决问题 ...

  4. 视频聊天室可以用php制作吗？

    首先,告诉你单纯用php制作视频聊天室是实现不了的,需要配合其他技术手段一起操作,例如和FLASH配合,使用FLASH获取语音(FLASH可以获取访问端的设备,例如摄像头). PHP运行在服务器端,是 ...

  5. poj 1286&&poj2409 Polya计数 颜色匹配

    #include <iostream> #include <math.h> using namespace std; #define LL long long LL gcd(L ...

  6. guzzle调用失败-缺少guzzle

    用composer安装了,但是目前为止还有问题.开发环境是 WAMP PHP5.4.12. 已经打开PHP.ini 的SSL扩展,现在还是提示缺少 curl-ca-bundle.cr 报错 No sy ...

  7. Razor.js，基于JavaScript的Razor实现

    哈罗大家好,之前造了JS模板轮子Otmpl,虽然勉强算不错,但是和MVC Razor的简洁优雅相比,简直是惨不忍睹.经过几天的研究,终于在参考国外一些牛人的代码后,展现出第一版,欢迎各位园友拍砖讨论. ...

  8. ACEXML解析XML文件——简单示例程序

    掌握了ACMXML库解析XML文件的方法后,下面来实现一个比较完整的程序. 定义基本结构 xml文件格式如下 <?xml version="1.0"?> <roo ...

  9. 从点击Button到弹出一个MessageBox， 背后发生了什么

    思考一个最简单的程序行为:我们的Dialog上有一个Button, 当用户用鼠标点击这个Button时, 我们弹出一个MessageBox. 这个看似简单的行为, 谁能说清楚它是如何运行起来的,背后究 ...

  10. [ACM_动态规划] 嵌套矩形

    问题描述:有n个矩阵,每个矩阵可以用两个整数a,b来表示 ,表示他的长和宽,矩阵X (a,b) 可以 嵌套 到Y (c,d) 里面当且仅当 a < c &&  b < d  ...