第一种方法：首先用margin：0 auto实现水平居中，然后设置position:relative，设置top为50%（父元素高度的50%），然后设置margin-top：-150px（设置负值是因为要向上移动div，150px是div的height），代码如下：

<!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>

实现效果如下：

因为div有了高度，可以给其指定overflow：auto，这样如果div中的内容太多的话，就会出现滚动条。该方法的有点在于可以不用那么多的嵌套标签，而且适用于所有的浏览器，缺点在于，如果浏览器窗口缩小到一定程度时，会div会消失

第二种方法：在上面的方法的基础上除了设置margin-top向上移动之外，还可以设置css3的transform属性也可以实现这个功能，通过设置div的transform:translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)，代码如下：

<!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>

第三种方法：使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可。

代码如下：

<!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>

css垂直居中方法（一）的更多相关文章

  1. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  2. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  3. css垂直居中方法总结

    在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...

  4. css垂直居中方法（四）

    第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...

  5. css 垂直居中方法总结

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

  6. css 垂直居中方法汇总

    查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...

  7. css垂直居中方法盘点

    1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...

  8. [css] 垂直居中方法

    原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...

  9. css垂直居中方法（二）

    第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...

随机推荐

  1. 51nod 1255 贪心/构造

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1255 1255 字典序最小的子序列 题目来源: 天津大学OJ 基准时间限 ...

  2. ROC曲线是通过样本点分类概率画出的 例如某一个sample预测为1概率为0.6 预测为0概率0.4这样画出来，此外如果曲线不是特别平滑的话,那么很可能存在过拟合的情况

    ROC和AUC介绍以及如何计算AUC from:http://alexkong.net/2013/06/introduction-to-auc-and-roc/ ROC(Receiver Operat ...

  3. power designer 设计数据库生成到oracle数据库

    一.概念模型设计 1. 创建工程,创建概念设计模型,在快捷菜单栏调出 palette 找到表格工具,在主界面中创建表格. 2. 创建出的表格,双击进入设计模式 -------------------- ...

  4. @angular/cli项目构建--Dynamic.Form

    导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...

  5. 【bzoj4987】Tree 树形背包dp

    题目描述 从前有棵树. 找出K个点A1,A2,…,Ak. 使得∑dis(AiAi+1),(1<=i<=K-1)最小. 输入 第一行两个正整数n,k,表示数的顶点数和需要选出的点个数. 接下 ...

  6. Linux命令学习（22）：ss命令

    版权声明 更新:2017-05-20 博主:LuckyAlan 联系:liuwenvip163@163.com 声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下面的ss命令 ...

  7. Tomcat的安装与环境配置

    首先,下载地址为:http://tomcat.apache.org/,在左侧的列表中找到Download,找到自己要下载的Tomcat的版本.我下载的是Tomcat 7. 进入后出现如上右图界面.我选 ...

  8. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  9. Qt Creator 中的段落 注释的 快捷方法【转载】

    原文网址:http://jingyan.baidu.com/article/d5c4b52bc2bd1dda560dc5bb.html 作为一名合格的程序员,漂漂亮亮的注释是必须的!!怎么在Qt Cr ...

  10. angular的$q,defer,promise

    $q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常). 官网:http://docs.angularjs.cn/api/ng/servi ...