<!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. 微信小程序是什么

    官方的开发文档 微信小程序写的不多,随便写写 创建项目,分析工具 微信小程序有专门的编辑工具,去官网下载 然后申请一个小程序项目,获得一个appId,然后进入编辑工具就可以直接开发了 编辑工具可以设置 ...

  2. println 与 print区别

    ------------恢复内容开始------------ println 与 print区别: 1.print输出之后不换行,如下: public class Newstart {    publ ...

  3. C语言中语句的跨行支持总结

    C语言中语句的跨行支持总结: 预处理一行写不下: 把一个预处理指示写成多行要用""续行,因为根据定义,一条预处理指示只能由一个逻辑代码行组成. 正常程序一行写不下: 把C代码写成多 ...

  4. 值得一学的C语言

    P1085 不高兴的津津 #include <stdio.h> int main( ) { int a,b; int max=0; int result; for (int i = 0; ...

  5. 056、Java中continue的用法

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  6. Windows安装tensorflow，配置vs2013，anaconda3.4，cudn9.0，cudnn7.0和pycharm

    前言 最近要开始学习深度,那么首先在电脑上安装tensorflow.但是我不知道是配置版本的问题,还是安装失误的问题,我安装了很久没有安装成功,最后重装了电脑,并且融合了所有的网上可以查到的方案才安装 ...

  7. 【pwnable.kr】 unlink

    pwnable.kr 第一阶段的最后一题! 这道题目就是堆溢出的经典利用题目,不过是把堆块的分配与释放操作用C++重新写了一遍,可参考<C和C++安全编码一书>//不是广告 #includ ...

  8. s5pc100开发板网卡驱动的移植

    相关软件下载地址:http://pan.baidu.com/s/16yo8Y fsc100开发板 交叉编译工具:arm-cortex_a8-linux-gnueabi-gcc 平台代码修改 vim   ...

  9. bzoj 1369: [Baltic2003]Gem

    确实是神2333333333,一开始以为是01染色sb题,然而被打脸... (蒟蒻不乱说,网上各种神犇的题解,还有图!!) #include <bits/stdc++.h> #define ...

  10. Mac电脑上怎么设置环境变量

    https://jingyan.baidu.com/article/8065f87f47b29523312498e4.html 环境变量是电脑操作系统中常用的一些变量,作用类似于将一些常用命令所在的文 ...