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 ...
随机推荐
- java.lang.IllegalArgumentException: addChild: Child name '/SSHE' is not unique
错误信息: Caused by: java.lang.IllegalArgumentException: addChild: Child name '/SSHE' is not unique ...
- MVC 与传统的 webform 的比较
代码架构方式 ASP 脚本语言和代码同置,每个请求页面对应一个物理文件 WebForm 代码后置 ,每个请求页面对应dll和一个.asp物理文件 MVC 代码分离,每个请求对应一个Action和一个V ...
- 服务订单SO创建
FUNCTION Z_SD_SALESORDER_CREATE. *"------------------------------------------------------------ ...
- 转载 Javascript继承两种形式详解
一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...
- Java：Exception
异常: 就是程序在运行时出现不正常的情况. 异常的由来:问题也是现实生活中一个具体的事物,也可以通过java的类的形式进行描述,并封装成对象.其实就是Java对不正常情况进行描述后的对象的体现. 两种 ...
- redhat enterprixe 5.0 NFS服务配置与管理
一.了解NFS Samba 是主要用于实现Linux和Windows操作系统之间文件共享的协议,而NFS则是实现UNIX和Linux操作系统之间文件共享的协议. NFS可以把网络上远程的文件挂载到本机 ...
- laypage分页功能demo
demo代码如下: <div id="view1"></div> <div id="page1"></div> ...
- [Js]瀑布流
描述: 1.每个图片宽度都一样,高度不一样 思路: 1.算出一共有几列(通过视窗总宽度/单个图片宽度得出) 2.根据一共几列*单个图片宽度,设置外围总宽度并水平居中(注:这个宽度应该是计算出来的,而不 ...
- 滑雪（dp好题）
题目描述:贝西去科罗拉多州去滑雪,不过还她不太会玩,只是个能力为 1 的渣渣.贝西从 0 时刻进入滑雪场,一到 T 时刻就必须离开.滑雪场里有 N 条斜坡,第 i 条斜坡滑行一次需要 Di 分钟,要求 ...
- C# SQLiteDataReader获得数据库指定字段的值
获得数据库指定字段的值,赋给本地变量 (1)如下,获得userinfo数据表里的字段"userid"."orgid", string userid=" ...