三行代码实现上下居中

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. Android中点击按钮启动另一个Activity以及Activity之间传值

    场景 点击第一个Activity中的按钮,启动第二个Activity,关闭第二个Activity,返回到第一个Activity. 在第一个Activity中给第二个Activity传递值,第二个Act ...

  2. 3Python脚本在linux环境下头文件解释

    #!/usr/bin/python到底是什么意思 有这句的,加上执行权限后,可以直接用 ./ 执行,不然会出错,因为找不到 python 解释器. #!/usr/bin/python 是告诉操作系统执 ...

  3. css 隐藏滚动条

    如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...

  4. 《Adaptive Density Map Generation for Crowd Counting》密集人群检测论文笔记

    背景 密度图\(D_g\)的生成对于最终网络预测结果\(D_e\)至关重要,但是密度图\(D_g\)生成的过程中,高斯核的大小常常是手动设定的,并且对于不同的数据集,核大小和形状通常不一样.这些手动选 ...

  5. C# Winform初体验

    设计一个简单的登录窗口,要求输入用户名:小金,密码:123456时候点登录能正确转到另一个窗口. 1.建立窗体应用. 2.这里创建一个login和一个NewForm的窗体. 3.在login的窗体拖拉 ...

  6. Django复制记录的方法

    最近的Django项目中有复制记录的需求.数据库里有一张名为Party的表,记录用户创建的party,现在要让用户能够复制一个新的party.本身非常简单的一个功能,但运行的时候出错了.我以为是复制过 ...

  7. P1001 A+B Problem（int，long long）

    题目描述 输入两个整数 a,b,输出它们的和(∣a∣,∣b∣≤109). 注意 Pascal 使用 integer 会爆掉哦! 有负数哦! C/C++ 的 main 函数必须是 int 类型,而且最后 ...

  8. maven的核心概念——POM

    Project Object Model:项目对象模型.将Java工程的相关信息封装为对象作为便于操作和管理的模型.Maven工程的核心配置.可以说学习Maven就是学习pom.xml文件中的配置. ...

  9. LOJ6287 诗歌

    题意 给定一个排列,问是否存在\(\forall a,b,a\neq b\)满足\(2|(a+b)\)且\(\frac{a+b}{2}\)在\(a,b\)间 做法 枚举中点\(a\),即需要存在类似\ ...

  10. Projected coordinate systems 和 wkid

    Projected coordinate systems Well-known ID Name Well-known text 2000 Anguilla_1957_British_West_Indi ...