参考于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. WebForm——JS检测浏览器是否是IE浏览器

    function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 && userAgen ...

  2. [umbraco] 数据结构

    我想此图就能说明一切了,不需要再废话了

  3. FineBI学习系列之FineBI的ETL处理（图文详解）

    不多说,直接上干货! 这是来自FineBI官网提供的帮助文档 http://help.finebi.com/http://help.finebi.com/doc-view-48.html 目录: 1. ...

  4. node mysql插入中文时报错

    一开始以为是前端传参.数据类型的问题,于是就直接把sql语句中的参数直接改成字符串值,但发现还是报500错误. 所以,这就排除了前端的问题. 剩下的就是数据库了,发现我的表设置有问题.凡是有中文数据的 ...

  5. JAVA多线程Thread VS Runnable详解

    要求 必备知识 本文要求基本了解JAVA编程知识. 开发环境 windows 7/EditPlus 演示地址 源文件   进程与线程 进程是程序在处理机中的一次运行.一个进程既包括其所要执行的指令,也 ...

  6. postgresql进程及内存结

    一.进程和内存架构图 postgresql数据库启动时,先启动一个postmaster的主进程,然后fork出一些辅助子进程. 二.主进程postmaster -bash-4.2$ which pos ...

  7. C++关于sort和priority_queue的运算符重载

    C++中的sort函数默认是将元素升序排列的,而priority_queue默认是将元素降序排列的(默认实现的是大顶堆). 自定义运算符用的比较多,以下2种对sort和priority_queue运算 ...

  8. linux下tar gz bz2 tgz z等众多压缩文件的压缩与解压方法

    Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...

  9. js设计模式之发布/订阅模式模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...

  10. 并发编程之 Condition 源码分析

    前言 Condition 是 Lock 的伴侣,至于如何使用,我们之前也写了一些文章来说,例如 使用 ReentrantLock 和 Condition 实现一个阻塞队列,并发编程之 Java 三把锁 ...