方法一：

.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. 【js jQuery】map集合 循环迭代取值---以及 map、json对象、list、array循环迭代的方法和区别

    后台给前台传来一个map @ResponseBody @RequestMapping(value = "getSys") public Map<Long,String> ...

  2. Day12 (黑客成长日记) 函数

    一.递归函数: 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. #计算阶乘: def fact(n): if n == 1: return 1 return n ...

  3. lab-kvm

    3)qemu帮助信息 qemu-kvm -h [root@Centos72 libvirt]#qemu-kvm -h QEMU emulator version (qemu-kvm--.el7_5.) ...

  4. 20155205 郝博雅 Exp4 恶意代码分析

    20155205 郝博雅 Exp4 恶意代码分析 一.实验目标 1.监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用 ...

  5. template模板的使用方法

    模板 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段 使用模 ...

  6. Object constraint language for code generation from activity models

    一.基本信息 标题:Object Constraint Language for Code Generation from Activity Models 时间:2018 出版源:Informatio ...

  7. parrot os 更新到3.7后无法上网（DNS暂时无法解析）

    parrot os 更新到最新后可能ping的通IP,ping不通域名,是DNS解析出问题了 修改/etc/resolv.conf sudo rm /etc/resolv.conf sudo vi / ...

  8. shell丢弃信息

        1>/dev/null 2>&1 或 >/dev/null 2>&1 的含义及注意事项 > 表示重定向到哪 1表示stdout标准输出,输出到屏幕 ...

  9. 6-使用requests库封装类处理get/post请求

    1.request安装 1)pip安装,直接pip install requests 2)下载离线包安装,加压后,命令行进入路径,执行python setup.py install 2.创建工程 注意 ...

  10. Django关联数据库时报错TypeError: __init__() missing 1 required positional argument: 'on_delete'

    sgrade = models.ForeignKey("Grades",) 执行python manage.py makemigrations后出现TypeError: __ini ...