参考于http://www.cnblogs.com/yugege/p/5246652.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            margin: 0 auto; /*水平居中*/

            position: relative; /*脱离文档流*/

            top: 50%; /*偏移*/

            margin-top: -150px;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            margin: 0 auto; /*水平居中*/

            position: relative; /*脱离文档流*/

            top: 50%; /*偏移*/

            transform: translateY(-50%);

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        body {

            display: flex;

            align-items: center; /*定义body的元素垂直居中*/

            justify-content: center; /*定义body的里的元素水平居中*/

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

html垂直居中的更多相关文章

  1. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  2. css元素水平居中和垂直居中的方式

    关于居中的问题,一直处于疑惑不解的状态,知道的几种方法好像也不是每一次都会起到作用,所以更加迷惑.主要是不清楚该 在什么情况下采用哪种解决方法,所以,整理了一些方法,梳理一下思路,做一个总结. 1. ...

  3. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

  4. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  5. CSS垂直居中总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...

  6. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  7. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  8. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  10. html文本垂直居中对齐

    html文本垂直居中对齐,代码如下: <div id="box" style="height:100px; line-height:100px; border:1p ...

随机推荐

  1. C# SqlHelper类的数据库操作

    #region 私有构造函数和方法 private SqlHelper() { } /// <summary> /// 将SqlParameter参数数组(参数值)分配给SqlComman ...

  2. odoo开发笔记--python获取当天时间

    取得时间相关的信息的话,要用到python time模块,python time模块里面有很多非常好用的功能,你可以去官方文档了解下,要取的当前时间的话,要取得当前时间的时间戳,时间戳好像是1970年 ...

  3. Hive中的Row_Number()使用

    语法:row_number() over (partition by 字段a order by 计算项b desc ) rank --这里rank是别名 partition by:类似hive的建表, ...

  4. Android在代码中获取应用签名

    平时都是用AS敲命令获取签名信息...还没有在代码中获取过签名~ 也算是老编程了,没做过这个稍微有点尴尬...本着有好轮子就用的原则,网上找了几篇博客,这块内容已经很完善了,我也没什么可以优化的... ...

  5. Docker概念学习系列之Docker核心概念之镜像Image

    不多说,直接上干货! 说明:   Docker 运行容器之前需要本地存在对应的镜像,如果镜像不存在,Docker 会尝试先从默认镜像仓库下载(默认使用Docker Hub公共注册服务器中的仓库),用户 ...

  6. CentOS QT can't find lGL

    直接安装: yum install libGL, yum install libGL-devel 库即可.

  7. 微服务之kong+consul(二)

    一.kong 1.使用kong来做服务网关,目前kong使用的是0.13版本现在地址:https://docs.konghq.com/install,kong的社区版没有dashboard,可以使用k ...

  8. Unix/Linux系统管理技术手册学习笔记——shell

    创建日期:2016/02/29 更新日期:2016/02/29 shell变量赋值时不能在等号两边留空白,否则shell会把变量名误认为是命令名 双引号括起来的变量可以进行替换(用*和?这样的文件名匹 ...

  9. Core Animation之CABasicAnimation(基础动画)

    #import "ViewController.h" @interface ViewController () @property(nonatomic,strong)UIButto ...

  10. 【WePY小程序框架实战三】-组件传值

    [WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型. 父组件 (paren ...