translate居中
| <!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居中的更多相关文章
- css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- css实现高度或者宽度不固定的div元素垂直左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- LI 导航
HTML: <div class="my_nav"> <ul> <li class="tiao cur" id="ord ...
- 用CSS/CSS3 实现水平居中和垂直居中，水平垂直居中的方式
一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...
- 将sass快速引入到移动端项目中加速开发
本文以上图为例子: 首先在根目录创建一个sass文件,在sass文件中分别创建4个文件夹bsae,pages,libs,style; base下存放:样式重置_normalize.scss; 自己定义 ...
- transform: translate(-50%, -50%) 实现块元素百分比下居中
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 利用CSS的translate属性或利用CSS实现图片居中的效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css居中div的几种常用方法
在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...
随机推荐
- maven搭建java ee项目
1.点击File->New->Other,选择maven project 2.选择maven project,点击Next,,而后再点击next,进入如下界面 如图选择最后一个,点击n ...
- HTML第一部分
HTML 内容(hyper text markup language,超文本标记语言) CSS 网页美化 Javacript 脚本语言 第一部分 HTML <html ...
- 使用nexus搭建maven仓库（本地私服）
我们在使用maven的时候,对于项目所依赖的jar包,maven默认会在中央仓库下载jar包,到本地的磁盘目录(如果没有配置则是用户目录下/.m2/repository文件夹下).如果公司内部搭了一个 ...
- RAID在数据库存储上的应用-转
随着单块磁盘在数据安全.性能.容量上呈现出的局限,磁盘阵列(Redundant Arrays of Inexpensive/Independent Disks,RAID)出现了,RAID把多块独立的磁 ...
- PHP多线程类
<?php /** * @title: PHP多线程类(Thread) * @version: 1.0 * @author: phper.org.cn < web@phper.org.cn ...
- Wcf Client 异常和关闭的通用处理方法
在项目中采用wcf通讯,客户端很多地方调用服务,需要统一的处理超时和通讯异常以及关闭连接. 1.调用尝试和异常捕获 首先,项目中添加一个通用类ServiceDelegate.cs public del ...
- eclipse关联tomcat并且部署java web应用程序
http://www.ibm.com/developerworks/cn/opensource/os-eclipse-tomcat/
- 一模 （3） day1
第一题: 题目大意:给出m个小于n的数,求出出现次数大于m div 2 的数. 1<=n<=2^31 1<=m<=10000 解题过程: 1.看到m的数据范围比较小,直接 ...
- 织梦dedecms分类信息模型上一页下一页失效办法
修改文件/include/arc.archives.class 将一下代码 $next = (is_array($nextR) ? " where arc.id={$nextR['id']} ...
- struts2 类型转换
概述 从一个 HTML 表单到一个 Action 对象, 类型转换是从字符串到非字符串. 在 struts2 中, 把请求参数映射到 action 属性的工作由 Parameters 拦截器负责, ...