三行代码实现垂直居中和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 ...
随机推荐
- 【idea激活码】，【WebStorm激活码】，【DataGrip激活码】，【IntelliJ 全家桶系列】，【定期更新】，【第一期】
IntelliJ IDEA.PyCharm.PhpStorm.WebStorm.RubyMide.AppCode.CLion.GoLand.DataGrip.Rider.Android Studio可 ...
- RAID | 故障处理
RAID | 故障处理 Unconfigured(good), Spun Up 背景:磁盘替换后在导入外部配置时提示失败,磁盘状态如题. MegaCli -pdgetmissing -a0查看miss ...
- go 算法与数据结构
数据结构 稀疏数组 package main import "fmt" /* 稀疏数组 案例:五子棋存盘与复盘 节省存储空间 */ type ValNode struct { ro ...
- node中 package.json 文件说明
1.概述 每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据).npm install命令根据这个配置文 ...
- xshell/secureCRT连接Linux及其常用命令
一.xshell:在Windows界面下用来访问远端不同系统下的服务器,从而比较好的达到远程控制终端的目的 下载安装后连接步骤: 二.secureCRT:在Windows下登录UNIX或Linux服务 ...
- PMP--1.1 PMBOK体系框架描述
PMBOK:Project Management Body Of Knowledge(项目管理知识体系) <PMBOK>中收录被普遍认可的良好实践. 普遍认可:在大部分时候适用于大多数项目 ...
- 洛谷 UVA11388 GCD LCM
UVA11388 GCD LCM Description of the title PDF The GCD of two positive integers is the largest intege ...
- hibernate报错:MappingException: Could not determine type for...解决办法
有时候实体里的一些属性并不想映射到数据库(比方说子级菜单List), 如果不做处理的话会报字段映射错误找不到这列Column Not Found 例如:org.hibernate.MappingExc ...
- 复习babel
对babel进行复习
- Codeforces Round #615 (Div. 3) 补题记录
第一次搞CF,结果惨不忍睹...还是太菜了 A:要用到全部的钱,所以总数必须是3的倍数,而且初始状态下任意一人的钱数不能超过总数除以3,否则没法分了 (也就这个签到算是在我能力范围之内了....) # ...