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 ...
随机推荐
- android 圆角边框及图片
<?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http: ...
- Android res/目录下子目录详解
Directory Resource Type animator/ XML files that define property animations. anim/ XML files that de ...
- Google Chrome 源码下载地址 (Google Chrome Source Code Download)
1. Google Chrome 源码 SVN 地址:http://src.chromium.org/svn.包含有 Chrome.Gears.Webkit.GCC 等源码以及编译依赖工具.Chrom ...
- 转:Linux 安装 Mysql
前段时间安装了Mysql,但是有些问题,就想把他卸载了,重新安装一个,但是没想到在Linux卸载软件是一个很痛苦的事情. 我的Mysql是用命令的方式安装的,就是上一篇文章用到的那个命令(sudo ...
- [转载]DataSet导入到Excel文件
/// <summary> /// 将数据导入到Excel /// </summary> /// <param name="ds"& ...
- css样式书写的问题
经常遇到前端的朋友问及css样式书写的问题,结合自己实际的工作,自己总结了整理了一下,给大家分享: 一.顺序问题:显示属性-位置属性-元素自身属性-文本属性-其他属性 1.显示属性:z-index.d ...
- redhat enterprixe 5.0 DNS 服务配置与管理
一.了解DNS相关概念 DNS是一个分布式数据库,在本地负责控制整个分布式数据库的部分段,每一段中的数据通过客户机/服务器模式在整个网络上存取.通过采用复制技术和缓存技术使得整个数据库稳定可靠的同时, ...
- 12个强大的Chrome插件
Chrome功能强大,也得益于其拥有丰富的扩展资源库.Chrome Web Store里有各种各样的插件,可以满足你使用Chrome时的各种要求.和Firefox一样,Chrome的扩展非常容易安装, ...
- hdu 4638 Group
http://acm.hdu.edu.cn/showproblem.php?pid=4638 问题其实就是求[L,R]中有多少个连续的段 若每一个人都是一个段 那么[L,R]中每一个朋友关系就会减少一 ...
- sqlite多表关联update
sqlite数据库的update多表关联更新语句,和其他数据库有点小不一样 比如:在sql server中: 用table1的 id 和 table2的 pid,关联table1 和 table2 , ...