三行代码实现垂直居中和cube
三行代码实现上下居中
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>
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的更多相关文章
- CSS div水平垂直居中和div置于底部
一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...
- CSS文字垂直居中和font-family属性
1.单行文字的垂直居中 单行文字垂直居中比较简单,直接让行高==盒子高度即可. 2.多行文字居中 多行文字居中,只需简单计算一下盒子的上padding即可.计算公式:padding-top=(盒子的高 ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- 解读CSS布局之-水平垂直居
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- vue 弹性布局 实现长图垂直居上，短图垂直居中
vue 弹性布局 实现长图垂直居上,短图垂直居中 大致效果如下图,只考虑垂直方向.长图可以通过滚动条看,短图居中效果,布局合理 html代码(vue作用域内): <div class=" ...
- 三行代码接入，社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。
(转载请声明出处:http://www.cnblogs.com/linguanh/) 前言: 接上次分享的 ListView 动态加载类,入口:http://www.cnblogs.com/lingu ...
- Java三行代码搞定MD5加密，测试5c短信网关的demo
看到之前项目中,关于MD5加密的足足写了一个辅助类. 其实在Java中大部分都帮你实现好了,完成MD5加密,主要就三行代码: /** * 对字符串md5加密 * * @param str * @ret ...
- C# 防止同时调用=========使用读写锁三行代码简单解决多线程并发的问题
http://www.jb51.net/article/99718.htm 本文主要介绍了C#使用读写锁三行代码简单解决多线程并发写入文件时提示"文件正在由另一进程使用,因此该进程无 ...
- python numpy 三行代码打乱训练数据
今天发现一个用 numpy 随机化数组的技巧. 需求 我有两个数组( ndarray ):train_datasets 和 train_labels.其中,train_datasets 的每一行和 t ...
随机推荐
- 掌握这四大MySQL知识点，吊打面试官
作为一名后端开发,MySQL的使用必不可少,合理的使用索引和索引调优是后端开发者必须掌握的技能之一. 在日常数据库的问题当中,不合理的使用索引占大部分. MySQL是大家工作上最常用的关系型数据库之一 ...
- powersploit的两个信息收集的脚本
0x00 简介 powersploit是基于powershell的渗透工具包,里面都是powershell的脚本工具文件.工具包地址:https://github.com/PowerShellMafi ...
- system.run
客户端开启了remotecommand后可以在server调用该命令在agent上执行一些命令 命令中有逗号 zabbix_get -s xxx.xxx.xxx.xxx -k "system ...
- C# 二进制 十进制 十六进制 之间的转换
; Console.WriteLine(a.ToString("X")); //10进制转16进制 Console.WriteLine(Convert.ToString(a, )) ...
- 三星正在改善1Gb MRAM寿命问题
据报道三星已经成功研发出有望替代嵌入式闪存存储器(eFlash)的嵌入式磁阻随机访问内存(eMRAM),容量为1Gb,测试芯片的优良率已达90%. 随着5G物联网时代的来临,存储器领域发展快速,而在这 ...
- 高级UI组件
1.进度条 (1).圆形进度条(一般默认为圆形进度条) <ProgressBar android:layout_width="wrap_content" android:la ...
- set()和get()方法
在很多程序中,都喜欢定义一个privata变量,然后为这个私有变量加上get(),set()方法.那为什么不直接定义一个public变量呢?这样做到底有什么好处和意义呢?难道真的仅仅只是为了代码规范? ...
- 【daily】Java枚举 - fastjson对enum的处理
目的 1.枚举值转换成完全的json: 2.对象中的枚举成员完全转换成json: 3.枚举类的全部值转换成json: 枚举定义 public enum SongsEnum { SAFE_AND_SOU ...
- 抛弃VMware吧，使用Win10自带的Hyper-V创建虚拟机
个人博客 地址:https://www.wenhaofan.com/article/20190619221449 介绍 Hyper-V是微软提出的一种系统管理程序虚拟化技术,能够实现桌面虚拟化. 启动 ...
- C# WinForm MessageBox.Show显示在窗体中间
一.新建MessageBoxEx类,并添加以下代码. using System; using System.Windows.Forms; using System.Text; using System ...