垂直居中—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 ...
随机推荐
- SVN服务端和客户端的安装与搭建
版权声明:本文为博主原创文章,转载请注明原文出处. https://blog.csdn.net/zzfenglin/article/details/50931462 SVN简介 SVN全名Subver ...
- hightopo自己用开源的方案重构一遍
经过一年多的学习吧前面路上的坑基本算踩过一遍了 所以下面计划吧hightopo网站上的demo用自己的方式重新写一遍
- Appium日志乱码终结指北
缘起 最近Android,IOS自动化多开群控都搞好了,但是Appium中的log 显示中文乱码问题像个苍蝇一样,看着感觉特别难受,挥之不去,抚之不平.论坛搜索了一下,很多帖子都反映过这个问题,但是都 ...
- poj 1050 最大子矩阵
a11 a12 a13 a14 a15 a21 a22 a23 a24 a25 a31 a32 a33 a34 a35 a41 a42 a43 ...
- DB2日常维护常用命令
1.检查是否有僵尸进程 ps -emo THREAD | grep -i Z | grep -i 实例名 2.处理死锁 --第一步:查看所有死锁 db2 get snapshot for lock ...
- QEMU Networking
QEMU Networking QEMU has a number of really nice ways to set up networking for its guests. It can be ...
- VSCode插件开发全攻略（三）package.json详解
更多文章请戳VSCode插件开发全攻略系列目录导航. package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先 ...
- 14.不同条目的listview
分类界面 整个项目的逻辑就是这样的 CategoryInfo public class CategoryInfo { private String title; private String url ...
- Java学习图
- 一篇文章读懂HTTPS及其背后的加密原理
HTTPS(全称: Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.本文,就来深入介绍下其原理. 1 ...