方法一：

.element {

  position: relative;

  top: 50%;

  transform: translateY(-50%);

}

这用用的好处了，无论是块级元素还是行内元素，都可以进行垂直居中，

transform意思是变形，是css3的内容

注意，这只是垂直居中，如果是上下左右居中，还需要加个width与margin:atuo

想看详细信息，可看出处：http://www.webhek.com/post/translatey-vertical-align.html

方法二：

就像下面，只需要给.container三行css规则就可以使它在水平方向和垂直方向均处于居中。

.container {

      display: flex;

      justify-content: center;

      align-items: center;

}

　　

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>垂直居中</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    .center {

        width: 200px;

        height: 200px;

        margin: 0 auto;

        background: #1879D9;

    }

    .center p {

        background: #fff;

        position: relative;

        top: 50%;

        transform: translateY(-50%);

        margin: 0 auto;

        width: 100px;

    }

    </style>

</head>

<body>

    <div class="center">

       <p>垂直居中内容</p>

    </div>

</body>

</html>

-----完-----

垂直居中—3行CSS3代码的更多相关文章

  1. 几行css3代码实现超炫加载动画

    之前为大家分享了css3实现的加载动画.今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效.我们一起看下效果图: 在线预览   源码下载 实现代码: 极简的html代码: <div> ...

  2. 18 行 JS 代码编一个倒时器

    有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...

  3. md语法之行内代码和代码片续集

    md语法之行内代码和代码片 一行之内嵌入一小段代码, 简称行内代码. 其方法为: 用撇号把代码围起来. 比如: import numpy as ny就可以了. 代码片的方法: 三个连续的撇号+pyth ...

  4. md语法之行内代码和代码片

    md语法之行内代码和代码片 比如说要在行内写上一句或者半句代码(代码的意思就是某种脚本语言), 用撇号围起来就可以了. 比如: import pandas as pd 写代码片(单独的一块脚本语言)的 ...

  5. 65行 JavaScript 代码实现 Flappy Bird 游戏

    飞扬的小鸟(Flappy Bird)无疑是2014年全世界最受关注的一款游戏.这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾. 这里给大家分享一篇这 ...

  6. 一个 11 行 Python 代码实现的神经网络

    一个 11 行 Python 代码实现的神经网络 2015/12/02 · 实践项目 · 15 评论· 神经网络 分享到:18 本文由 伯乐在线 - 耶鲁怕冷 翻译,Namco 校稿.未经许可,禁止转 ...

  7. 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏

    早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...

  8. HTML超出文本多行截取代码

    HTML超出文本多行截取代码如下: HTML: <div class="sytm-text-1">      <p>           沈阳网页制作公司有 ...

  9. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

随机推荐

  1. 组件内守卫beforeRouteEnter和beforeRouteLeave

    beforeRouteEnter用法和其他守卫差不多. 有个注意的地方就是beforeRouteEnter不能用this获取组件内收据. 在next()方法内存入vm这个参数,获取组件内数据. bef ...

  2. Github使用: 本地上传, 与之同步

    很久不用Github 又忘记了怎么同步了, Git桌面前年已经部署好了. 1. 打开GitHub Desktop -- file -- clone repository --- 操作其中想要的一个文件 ...

  3. 《python语言程序设计》_第4章_选择

    第四章 # 4.1 引言 布尔表达式:选择语句选择的条件. 程序: import math #加载math模块radius=eval(input("Enter an integer:&quo ...

  4. IDEA添加项目为library

    1.如果要作为library的项目没有被IDEA编译就先把项目放在IDEA里面编译一下,因为这样后面导入module会方便一点.下面直接附上步骤 2.假设你已经用IDEA编译好了作为library的项 ...

  5. repo 用法

    repo的用法(zz) 注:repo只是google用Python脚本写的调用git的一个脚本,主要是用来下载.管理Android项目的软件仓库.(也就是说,他是用来管理给git管理的一个个仓库的) ...

  6. ansible 关闭ssh首次连接时提示

    关闭ssh首次连接时提示. 修改/etc/ansible/ansible.cfg配置文件 方法一:(推荐,配置文件中存在) host_key_checking = False 方法二: ssh_arg ...

  7. Web browser的发展史

        浏览器是个显示网页伺服器或档案系统内的HTML文件,并让用户与此些文件互动的一种软件.个人电脑上常见的网页浏览器包括微软的Internet Explorer.Moailla的Firefox.O ...

  8. Android MonkeyRunner

    MonkeyRunner 也是一款安卓sdk自有的测试工具 可以用来做功能测试 阅读目录 MonkeyRunner环境搭建 1. 安装JDK的安装与配置 2. 安装Python编译器     http ...

  9. 动态调试|Maccms SQL 注入分析(附注入盲注脚本)

    0x01 前言 已经有一周没发表文章了,一个朋友叫我研究maccms的代码审计,碰到这个注入的漏洞挺有趣的,就在此写一篇分析文. 0x02 环境 Web: phpstudySystem: Window ...

  10. Redis安装和实际应用

    上次介绍了Redis的来龙去脉以及相关一些情况,点击回顾<深入浅出Redis>,接下来我们再讲讲Redis的安装和实际应用. 一.Redis的安装 下载安装包,redis-3.2.9.ta ...