<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <meta name="Author" content="胡超">
  <title>super胡</title>
  <style type="text/css">
  html,body,div {margin: 0;padding: 0}
  .box {
  position: relative;
  margin: 20px auto;
  width: 200px;
  height: 200px;
  background: #ddf;
  }
  .content {
  position: absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  padding: 10px;
  width: 100px;
  height: 80px;
  background: #abc;
  text-align:center;
  line-height:80px;
  }
  </style>
  </head>
  <body>
  <div class="box">
  <div class="content">
  This is test
  </div>
  </div>
  </body>
  </html>

translate居中的更多相关文章

  1. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  2. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  3. css实现高度或者宽度不固定的div元素垂直左右居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. LI 导航

    HTML: <div class="my_nav"> <ul> <li class="tiao cur" id="ord ...

  5. 用CSS/CSS3 实现水平居中和垂直居中，水平垂直居中的方式

    一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...

  6. 将sass快速引入到移动端项目中加速开发

    本文以上图为例子: 首先在根目录创建一个sass文件,在sass文件中分别创建4个文件夹bsae,pages,libs,style; base下存放:样式重置_normalize.scss; 自己定义 ...

  7. transform: translate(-50%, -50%) 实现块元素百分比下居中

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 利用CSS的translate属性或利用CSS实现图片居中的效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

随机推荐

  1. log4j配置文件的详解

    1.配置根Logger,其语法为: log4j.rootLogger = [ level ] , appenderName, appenderName, … 其中,level 是日志记录的优先级,分为 ...

  2. EasyUI combotree 使用技巧

    $('#areaName').combotree({ url: '../Ajax/Common.ashx?Method=GetCombotreeData', multiple: true, check ...

  3. C++统计一段文字中各单词出现的频率

    #include <iostream> using namespace std; /* run this program using the console pauser or add y ...

  4. LevelDb简单介绍和原理——本质：类似nedb，插入数据文件不断增长（快照），再通过删除老数据做更新

    转自:http://www.cnblogs.com/haippy/archive/2011/12/04/2276064.html 有时间再好好看下整个文章! 说起LevelDb也许您不清楚,但是如果作 ...

  5. BZOJ4006 [JLOI2015]管道连接

    裸的状压DP 令$f_S$表示包含颜色集合S的最小斯坦纳生成森林的值,于是有: $$f_S=\min\{f_S,f_s+f_{S-s}|s\subset S\}$$ 然后嘛...还是裸的斯坦纳树搞搞. ...

  6. ACTIVITI 源码研究之命令模式执行

    ACTIVITI 是一个优秀开源软件,通过阅读源码,我们不但可以了解工作流引擎执行的原理还可以增加个人的编码功力. ACTIVITI 所有执行过程都是采用命令模式进行执行. 本文主要描述流程引擎数据保 ...

  7. HDOJ 1754 I Hate It 线段树 第二题

    I Hate It Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就 ...

  8. subline快捷键

    折叠所有代码:  按ctrl+k,再按ctrl+1 展开所有代码: 按ctrl+k,再按ctrl+j 折叠此处代码:  ctrl+shift+[ 展开此处代码: ctrl+shift+]

  9. tornado介绍

    一.定义 tornado是一个异步非阻塞模型的服务器(tcp/http).web框架. 二.特性 1.高并发 原因:其一,网络事件循环部分根据操作系统选择最高效的,如Linux会是epoll: 其二, ...

  10. vs 折叠跟展开所有方法。

    Ctrl + M + O: 折叠所有方法 Ctrl + M + M: 折叠或者展开当前方法 Ctrl + M + L: 展开所有方法