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. 申请Google API Key

    想使用google map api 必须从google网站上获取key之后才有权限使用,但是要想申请key必须要有证明书,也就是所谓的MD5.下面一步一步来说明: 步骤1: 如果你使用的是eclips ...

  2. KVC/KVO简单实例代码

    Person.h #import<Foundation/Foundation.h> @classAccount; @interfacePerson :NSObject{ @private ...

  3. (转)Linux服务器调优

    Linux内核参数 http://space.itpub.net/17283404/viewspace-694350 net.ipv4.tcp_syncookies = 1 表示开启SYN Cooki ...

  4. JAVA学习博客---2015-6

    JAVA核心技术卷一第一遍看得差不多了,应该是五月初开始看的,用了两个月的中午时间看完的,一共七百多页,接下来还是需要再看一遍,不懂的还是有很多. JAVA和C++一样是面向对象OOP的语言,不同于命 ...

  5. Django如何搭建服务器

    建立django站点: 新建Django项目,我这里是使用命令创建项目的. django-admin startproject HelloDjango  创建HelloDjango项目 然后进入到He ...

  6. winform 子报表

    public void BindReport(string _invno,string _type)         {             if (!Is_Has_Express_No(_inv ...

  7. 微信公共平台开发-（.net实现）3--发送文本消息

    最近,项目这边比较忙,没来得及续写,哎,先吐吐槽吧,在这个周六还得来上班,以后每个周六多要上,一天的滋味真有点受不鸟呀.还不习惯ing... 嗯,别的不说了现在开始接着上次http://www.cnb ...

  8. 解决ng界面长表达式(ui-set)

    本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题. 在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时 ...

  9. C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

  10. Python--命令行参数解析Demo

    写没有操作界面的程序时,最讨厌的就是参数解析问题,尤其是很多参数那种,下面是一个小Demo,拿出来与各位分享: # -*- coding:utf8 -*- import os import datet ...