三行代码实现上下居中

position: relative;
top: 50%;
transform: translateY(-50%);

效果如下：
 
代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css123</title>
<style>
body {
background: #2ae0bb;
}
.box {
width: 40%;
height: 500px;
background: #008800;
}
.text {
width: 40%;
height: 200px;
background: #e0e0e0;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.text span{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
background: #18aa8c;
}

</style>
</head>
<body>
<div class="box">
<div class="text">
<span>这是一个居中元素块。</span>
</div>
</div>
<div class="pool">
<div class="text-dec">
<span>Look!I'm here.while just you know.</span>
</div>
</div>

</body>
</html>

 
div宽度为百分比，想让高度和宽度一样，即让div为正方形实现方法
width: 20%;
height: 0;
padding-bottom: 20%;
效果图：
代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>square</title>
<style>
body {
background: #2ae0bb;
}
.aa {
width: 20%;
height: 0;
padding-bottom: 20%;
background: #095c05;
margin: 0 auto;
}
.aa .cc{
position: relative;
top: 50%;
transform: translateY(50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
width: 18%;
height: 0;
padding-bottom: 18%;
background: #E6E6E6;
margin: 0 auto;
}

</style>
</head>
<body>
<div class="aa">
<div class="cc"></div>
</div>

</body>
</html>

 
 

三行代码实现垂直居中和cube的更多相关文章

  1. CSS div水平垂直居中和div置于底部

    一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...

  2. CSS文字垂直居中和font-family属性

    1.单行文字的垂直居中 单行文字垂直居中比较简单,直接让行高==盒子高度即可. 2.多行文字居中 多行文字居中,只需简单计算一下盒子的上padding即可.计算公式:padding-top=(盒子的高 ...

  3. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  4. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  5. vue 弹性布局 实现长图垂直居上，短图垂直居中

    vue 弹性布局 实现长图垂直居上,短图垂直居中 大致效果如下图,只考虑垂直方向.长图可以通过滚动条看,短图居中效果,布局合理 html代码(vue作用域内): <div class=" ...

  6. 三行代码接入，社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。

    (转载请声明出处:http://www.cnblogs.com/linguanh/) 前言: 接上次分享的 ListView 动态加载类,入口:http://www.cnblogs.com/lingu ...

  7. Java三行代码搞定MD5加密，测试5c短信网关的demo

    看到之前项目中,关于MD5加密的足足写了一个辅助类. 其实在Java中大部分都帮你实现好了,完成MD5加密,主要就三行代码: /** * 对字符串md5加密 * * @param str * @ret ...

  8. C# 防止同时调用=========使用读写锁三行代码简单解决多线程并发的问题

    http://www.jb51.net/article/99718.htm     本文主要介绍了C#使用读写锁三行代码简单解决多线程并发写入文件时提示"文件正在由另一进程使用,因此该进程无 ...

  9. python numpy 三行代码打乱训练数据

    今天发现一个用 numpy 随机化数组的技巧. 需求 我有两个数组( ndarray ):train_datasets 和 train_labels.其中,train_datasets 的每一行和 t ...

随机推荐

  1. alpine安装telnet等工具

    alpine确实是很精简,但是对于熟悉了centos和ununtu的个人来说,实在是不习惯. 因此,记录关于alpine的一些包安装,以及操作细节(逐渐补充). 1. telnet >>& ...

  2. linux 查看系统资源使用信息的一些命令集合

    linux上的进程查看及管理工具: pstree,ps,pidof,pgrep,top,htop,glances,pmap,vmstat,dstat,kill,pkill,job,bg,fg,nohu ...

  3. Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  4. mysql必知必会--使用MySQL

    连接 在具有可供使用的MySQL DBMS和客户机软件之后,有必要简要讨 论一下如何连接到数据库. MySQL与所有客户机 - 服务器DBMS一样,要求在能执行命令之前登 录到DBMS.登录名可以与网 ...

  5. 小白的linux笔记11：放弃gitbook，转战Sphinx

    gitbook生成的html目录不折叠且链接失效 装好了gitbook和nodejs,本以为可以安心的做电子书了. 谁想到gitbook慢的一P,而且导出来的html目录不折叠,最关键的是链接有问题, ...

  6. POJ - 1426-Find The Multiple-专为小白解惑-同余加搜索树

    题意:给出一个整数n,(1 <= n <= 200).求出任意一个它的倍数m,要求m必须只由十进制的'0'或'1'组成,m不超过100位. 解题思路:首先大家应该会想到暴力枚举每一个m,但 ...

  7. window10 cmd 常见命令

    AT 计划在计算机上运行的命令和程序. ATTRIB 显示或更改文件属性. BREAK 设置或清除扩展式 CTRL+C 检查. CACLS 显示或修改文件的访问控制列表(ACLs). CALL 从另一 ...

  8. C语言 putchar

    C语言 putchar putchar主要功能是输出一个char.可以根据ASLL号码输出对应字符 案例 #define _CRT_SECURE_NO_WARNINGS #include <st ...

  9. ls, chgrp, chown, chmod

    ls命令 [root@client ~]# ls -la 总用量 dr-xr-x---. root root 2月 : . dr-xr-xr-x. root root 2月 : .. -rwxrwxr ...

  10. D - Counting Squares

    Your input is a series of rectangles, one per line. Each rectangle is specified as two points(X,Y) t ...