<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .box{

             width: 400px;

             height: 400px;

             border-radius: 200px;

             background-color: #65ffdd;

             margin: 100px auto;

             position: relative;

         }

         .rec{

             width: 100px;

             height: 100px;

             background-color: #7a67ff;

             position: absolute;

             /*定位的百分比是参照父容器的宽高*/

             left: 50%;

             top: 50%;

             /*使用transform实现元素的居中是参考元素本身的宽高*/

             transform: translate(-50%,-50%);

         }

     </style>

 </head>

 <body>

 <div class="box">

     <div class="rec"></div>

 </div>

 </body>

 </html>

h5-任意元素居中的更多相关文章

  1. H5C304

    H5C304 1.渐变 1)线性渐变 point,angle可取4个值:如上所示 需要使用background添加 2)径向渐变 position是按照元素右上为原点的 3)重复渐变 同样有重复线性渐 ...

  2. js实现前端的搜索历史记录

    最近在对接前台页面(WEB端)时,产品要求需记录下客户的搜索记录,我们是前后台完全分离的项目,根本不能保存的session域中,没办法,虽然作为后台开发,遇到需求就自己研究了一通,先看一下最终效果图, ...

  3. 用h+c实现天天生鲜首页

    网页效果图:http://www.dycun.cc/ 如下: css代码 main.css: /*因为大部分的字体都是12px,颜色一致, 所以统一设置下*/ body{ font-size: 12p ...

  4. 移动端App uni-app + mui 开发记录

    前言 uni-app uni-app是DCloud推出的终极跨平台解决方案,是一个使用Vue.js开发所有前端应用的框架,官网:https://uniapp.dcloud.io/ mui 号称最接近原 ...

  5. 解决H5设置了line-height但并没有居中的问题

    遇到的问题 明明设置了line-height = height,但在H5页面里文字并没有居中. 原因 因为line-height是两条基线之间的距离,当元素高度和font-size差距较大时,会出现不 ...

  6. H5禁止底部横向滚动条，使一个元素居中

    1.禁止底部横向滚动条 选择元素设置样式 { overflow-y:auto; overflow-x:hidden } 2.元素居中 { margin-left:auto ; margin-right ...

  7. h5 上下左右前后居中

    .outer { width: 200px; height: 200px; background: red; position: relative; } .inner { position: abso ...

  8. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  9. 用H5中的Canvas等技术制作海报

    在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

  10. 手动制作微信h5分享活动页面

    现在网上有很多自动制作h5宣传页的网站,可以通过传图,点几下鼠标就可以制作一个集动画.生产二维码等各种功能于一身的h5微信宣传页.对于运营来讲,非常方便,没有技术门槛,不足之处就是只有特定的动画效果, ...

随机推荐

  1. tomcat-性能？

    http://www.cnblogs.com/zhuawang/p/5213788.html http://www.cnblogs.com/zhuawang/p/5213192.html http:/ ...

  2. python基础数据类型--集合（set）

    python基础数据类型--集合(set) 集合是一个数学概念由一个或多个确定的元素所构成的整体叫做集合 集合中的三个特征 1.确定性(元素必须死可hash) 2.互异性(去重) 3.无序性(集合中的 ...

  3. solidworks快捷键画图

    平移 :ctrl+鼠标中键 旋转:鼠标中键 缩放:移动中键

  4. 一百零五、SAP中ALV事件之十七，让ALV表格修改后保存到数据库

    一.我们来到代码界面设置保存按钮的代码 二.i_grid_settings这个属性用来编辑单元格之后,返回给程序编辑后的值 三.我们双击点  'REUSE_ALV_GRID_DISPLAY',来到定义 ...

  5. 六十二、SAP中的字符串运算符与文本拼接

    一.代码如下 二.输出效果如下

  6. Spark RDD 算子总结

    Spark算子总结 算子分类 Transformation(转换) 转换算子 含义 map(func) 返回一个新的RDD,该RDD由每一个输入元素经过func函数转换后组成 filter(func) ...

  7. Python MySQL Update

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...

  8. poj 1330 Nearest Common Ancestors 求最近祖先节点

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37386   Accept ...

  9. 通过Request获取客户端的真实IP

    我们在做项目的时候经常需要获取客户端的真实ip去进行判断,为此搜索了相关文章,以下这个讲解的比较明白,直接拿来 https://blog.csdn.net/yin_jw/article/details ...

  10. C++编程学习（一） 概述

    从一年前开通博客,陆陆续续写了一些总结类的东西,但是一直没push到网上.现在发现,分享自己的笔记也是自身学习.与他人交流的好方式.从今天开始,我会经常的push一些学习笔记到博客中,先从C++开始吧 ...