垂直居中—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 ...
随机推荐
- 手写简单PE
环境工具:Windows 10 010Editor 目标程序功能: 调用MessageBoxA弹出消息框. 1.构造DOS头 typedef struct _IMAGE_DOS_HEADER { // ...
- 3.11formdata的使用
var formData = new FormData(); formData.append('files[]',document.getElementById("file").f ...
- Github使用: 本地上传, 与之同步
很久不用Github 又忘记了怎么同步了, Git桌面前年已经部署好了. 1. 打开GitHub Desktop -- file -- clone repository --- 操作其中想要的一个文件 ...
- [转]构建高性能MySQL体系
来源:http://www.yunweipai.com/archives/21232.html 构建高性能MySQL系统涵盖从单机.硬件.OS.文件系统.内存到MySQL 本身的配置,以及schema ...
- LinkeList 特有方法
LinkedList:特有方法:addFirst();addLast();添加元素到集合,添加到头尾,getFirst();getLast();获取元素,但不删除元素.如果集合中没有元素,会出现NoS ...
- 在windows系统安装pygame项目
STEP1: 下载安装程序 访问https://bitbucket.org/pygame/pygame/downloads/,查找与你运行的Python版本匹配的安装程序,如果找不到,可以去https ...
- 图像处理及opencv汇总
OPENCV——C++ 1.windows基于vs2017的opencv安装 2.为opencv添加contrib库 3.opencv源码编写规则 4.OpenCV库框架结构 5.OpenCV从2到3 ...
- R_展示变量之间关系的图形
#绘制普通矩阵散点图 plot(dataframe) #绘制带有拟合直线,最佳拟合曲线和直方图的矩阵散点图 library(car) attach(dataframe) scatterplotMatr ...
- 【hdu2000】ASCII码排序
题目来源:www.acm.hdu.edu.cn 题目编号:2000 ASCII码排序 /*----------------------------------------原题目------------ ...
- ORACLE知识点总结
一.ORACEL常用命令 1.解锁账户:ALTER USER username ACCOUNT UNLOCK; 2.查看数据库字符集:SELECT USERENV ('language') FROM ...