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 ...
随机推荐
- MessageDigest简介
一.概述 MessageDigest 类为应用程序提供信息摘要算法的功能,如 MD5 或 SHA 算法.信息摘要是安全的单向哈希函数,它接收任意大小的数据,并输出固定长度的哈希值. MessageDi ...
- spring配置带参数的视图解析器：ParameterMethodNameResolver
1.配置处理器 <!-- 处理器 --> <bean id="myController" class="cn.cnsdhzzl.controller.M ...
- 使用JQuery的Ajax调用SOAP-XML Web Services（Call SOAP-XML Web Services With jQuery Ajax）（译+摘录）
假设有一个基于.Net的Web Service,其名称为SaveProduct POST /ProductService.asmx HTTP/1.1 Host: localhost Content-T ...
- mvc+ef+oracle环境中报错：ORA-00001: 违反唯一约束条件
分析原因: 在oracle中,主健不能自动生成,不过可以通过“序列”来实现,如果是这样的话,问题很可能就出在“序列”上了: ORACLE表主键ID突然从已经存在的ID值开始自动生成,导致违反主键唯一性 ...
- c++读入之 -- 汉字读入遇到的问题
好吧,课题和汉语处理有关,于是就要求用c++来读入汉字进行处理. 首先使用wchar_t字符即宽字符,然后这样定义: #include <cstdio> #include <cwch ...
- BZOJ3928 [Cerc2014] Outer space invaders
第一眼,我勒个去...然后看到n ≤ 300的时候就2333了 首先把时间离散化,则对于一个时间的区间,可以知道中间最大的那个一定要被选出来,然后把区间分成左右两份 于是区间DP就好了,注意用左开右开 ...
- configure错误列表供参考
另外附一些常见的configure错误列表供参考: configure: error: No curses/termcap library found网上有的说法是:--with-named-curs ...
- 找出html中的图片、包括css中的图片，读出图片数据转换为base64数据
<?php echo ">> 图片的地址,css里面的要打单引号\r\n"; echo ">> 相同的图片,使用css实现图片地址只出现一次 ...
- POJ 1753 Flip Game 状态压缩,暴力 难度:1
Flip Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4863 Accepted: 1983 Descript ...
- JMeter常用函数整理
"_csvRead"函数 csvRead函数是从外部读取参数,csvRead函数可以从一个文件中读取多个参数. 下面具体讲一下如何使用csvread函数: 1.新建一个csv或者t ...