<!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. AP聚类算法（Affinity propagation Clustering Algorithm ）

    AP聚类算法是基于数据点间的"信息传递"的一种聚类算法.与k-均值算法或k中心点算法不同,AP算法不需要在运行算法之前确定聚类的个数.AP算法寻找的"examplars& ...

  2. C语言链表

    #include<stdio.h>#include<malloc.h>#include<stdlib.h> typedef struct Node{ int dat ...

  3. java入门第二步之helloworld【转】

    前一篇博客已经介绍了jdk的安装:接下来我们就乘热打铁,完成第一个程序:helloworld(每学一样程序的新东西都是从实现helloworld开始的) 1.不是用开发工具IDE,只是使用记事本来实现 ...

  4. 在单元测试中指定log4j的配置文件

    在开发过程中,我们会使用到log4j来输出日志,我们希望在单元测试的时候,只看到部分日志信息,或者定义日志输出的级别.   这个时候手工指定log4j的配置文件:   具体做法如下: 定义类如下: i ...

  5. bzoj 1816: [Cqoi2010]扑克牌

    #include<cstdio> #include<iostream> using namespace std; ],ans; bool pan(int x) { int a1 ...

  6. HDU 4890 One to Four（2014 Multi-University Training Contest 3）

    题意:给定一个长方形网格,要把它切成完全相同4个部分(这里完全相同指可以旋转平移后能重叠).把4个重叠后每个网格对应有四个数字相加,得到一种方案,所有格子中和最小就是该种方案的值,在多种方案中,最后问 ...

  7. POJ 3225 Help with Intervals

    U:把区间[l,r]覆盖成1I:把[0,l-1][r+1,∞]覆盖成0D:把区间[l,r]覆盖成0C:把[0,l-1][r+1,∞]覆盖成0 , 且[l,r]区间0/1互换(即异或)S:[l,r]区间 ...

  8. City Skyline

    题目大意:(poj 3044) 给出城市的正视图,所有的大楼都是矩形,给出正视图每个高度改变时的坐标,问最少有多少大楼.一共N个矩形,N<=50000 解题过程: 首先可以把问题转化一下:有N块 ...

  9. 创建ROS功能包（四）

    为了方便直接用ROS的create-pkg命令行工具 roscreate-pkg chapter2_tutorials std_msgs rospy roscpp std_msgs 包含了常见的消息类 ...

  10. svn自动更新

    果对svn不熟悉,当svn上面有更新时,想看到实时效果,就得去web目录手动更新,比较麻烦 其它svn有一个自动更新的功能 利用 hook   在svn 仓库目录下面有一个hook目录 在post-c ...