垂直居中—3行CSS3代码
方法一：
.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代码的更多相关文章
- 几行css3代码实现超炫加载动画
之前为大家分享了css3实现的加载动画.今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效.我们一起看下效果图: 在线预览 源码下载 实现代码: 极简的html代码: <div> ...
- 18 行 JS 代码编一个倒时器
有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...
- md语法之行内代码和代码片续集
md语法之行内代码和代码片 一行之内嵌入一小段代码, 简称行内代码. 其方法为: 用撇号把代码围起来. 比如: import numpy as ny就可以了. 代码片的方法: 三个连续的撇号+pyth ...
- md语法之行内代码和代码片
md语法之行内代码和代码片 比如说要在行内写上一句或者半句代码(代码的意思就是某种脚本语言), 用撇号围起来就可以了. 比如: import pandas as pd 写代码片(单独的一块脚本语言)的 ...
- 65行 JavaScript 代码实现 Flappy Bird 游戏
飞扬的小鸟(Flappy Bird)无疑是2014年全世界最受关注的一款游戏.这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾. 这里给大家分享一篇这 ...
- 一个 11 行 Python 代码实现的神经网络
一个 11 行 Python 代码实现的神经网络 2015/12/02 · 实践项目 · 15 评论· 神经网络 分享到:18 本文由 伯乐在线 - 耶鲁怕冷 翻译,Namco 校稿.未经许可,禁止转 ...
- 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏
早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...
- HTML超出文本多行截取代码
HTML超出文本多行截取代码如下: HTML: <div class="sytm-text-1"> <p> 沈阳网页制作公司有 ...
- 只有20行Javascript代码！手把手教你写一个页面模板引擎
http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...
随机推荐
- mysql 模糊查询条件带‘%’问题
- 记一次需要用到复杂的groupingBy的需求
一:先定义结构 public class Foo { private Integer id; private String name; private BigDecimal amount; publi ...
- Java 包与类的命名（util、service、tool、dao ）区别
util 通用的.与业务无关的,可以独立出来,可供其他项目使用.方法通常是public static,一般无类的属性,如果有,也是public static. service 与某一个业务有关,不是通 ...
- 2019浙大校赛--J--Extended Twin Composite Number（毒瘤水题）
毒瘤出题人,坑了我们好久,从基本的素数筛选,到埃氏筛法,到随机数快速素数判定,到费马小定理,好好的水题做成了数论题. 结果答案是 2*n=n+3*n,特判1,2. 以下为毒瘤题目: 题目大意: 输入一 ...
- selenium自动化常用函数
前段时间弄一个测试框架,满足公司简单网站的测试,整合了一个函数模块,包括常用的截图.邮件发送.测试报告生成,具体代码如下 import smtplib from BSTestRunner import ...
- SQL 经典应用
SQL Server日常维护常用的一些脚本整理. 1.sql server开启clr权限: exec sp_configure 'clr enabled', 1 GO RECONFIGURE GO A ...
- eclipse 导入包含子maven项目的maven项目时的正确方式（父子项目）
eclipse 导入包含子maven项目的maven项目时的正确方式(父子项目) NO1 导入时依次选择 import > Maven > Existing Maven Projects ...
- Java面试题总结（附答案）
1.什么是B/S架构?C/S架构? B/S(Browser/Server),浏览器/服务器程序: C/S(Client/Server),客户端/服务端,桌面应用程序. 2.网络协议有哪些? HTTP: ...
- Java集合排序（面试必考点之一）
集合是Java面试必考知识点,而集合的排序也是非常重要的,工作中经常用到,那么这个知识点也是必须要掌握的,下面是我曾经面试时被面试官问的问题: 根据API可知,Java集合的工具类Collection ...
- 关键字New，如阴魂不散
本文是溪源翻译的第一篇技术文章,查看原文,因时间仓促,也许翻译过程措辞不当,还请见谅. 当你使用类似于C#或VisualBasic这种强类型语言,在实例化对象时,你往往会使用New这个关键字.我敢保证 ...