三行代码实现上下居中

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. git基础教程(三)

    3.github与git同步 3.1 配置公私钥 3.2 github上建立个人仓库 3.3 本地仓库同步到github #将本地仓库与远端仓库建立连接 #用简写名代替后面的远端连接 git remo ...

  2. PVE裸机虚拟化环境安装之后的一些部署记录

    pve镜像使用的是proxmox-ve_6.1-1 安装之后root登录 apt update 更新源的时候会出现一些问题,是因为其中有一个企业源报错的原因 安装sudo和vim,否则不好管理非roo ...

  3. Python3.7+Pycharm+cuda10.0+tensorflow GPU版本 安装

    处理器:I5-7500 显卡   :GTX1050Ti 系统   :Win10 1. 首先搭建Python环境. 官网https://www.python.org/downloads/下载Python ...

  4. List保持顺序去重

    Map<String, List<Bean>> orderMap = list.stream().collect(Collectors.groupingBy(Bean::get ...

  5. 【pattern】设计模式（3） - Observer观察者模式

    源码地址:https://github.com/vergilyn/design-patterns 另外一个大神很全的Github:https://github.com/iluwatar/java-de ...

  6. CSP2019第二轮-划水游记

    又是 颓废的 一年 眨眼间已经初三了 到了NOIPCSP的时节 Day0 学校(没错,全校事件)抽风地把二晚停了,于是也就有了机会早早回家van♂耍 和母上大人简单地收拾收拾东西,回了姥姥家 以&qu ...

  7. shell脚本监测进程并重启

    本人实例: #!/bin/bash ps -ef | grep elastic | grep -v grepif [ $? -ne 0 ]thenecho "start process... ...

  8. visual studio2010编译过程中出现COFF文件损坏的原因和方法总结

    一.现象描述 笔者在用visual studio2010进行控制台程序进行程序编译时候,经常会遇到代码代码没有语法错误,但是编译不通过的现象.系统报错为 LINK : fatal error LNK1 ...

  9. Win10查看屏保的所在位置

    路径 C:\Users\Hlzy\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\Local ...

  10. opencv —— line、ellipse、rectangle、circle、fillPoly、putText 基本图形的绘制

    绘制线段:line 函数 void line(Mat& img, Point pt1, Point pt2, const Scalar& color, int thickness=1, ...