<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

        .box{

            width: 440px;

            height: 500px;

            background-color: #ccc;

            overflow: hidden;

            position: relative;

        }

        .son{

            width: 200px;

            height: 100px;

            background-color: red;

            margin: auto;

            position: absolute;

            /*定位:参照的是父容器*/

            left: 50%;

            top: 50%;

            /*偏移:偏移中的百分比参照的是自身*/

            /*定位加变化是解决居中垂直对齐问题的神器、*/

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

         }

     </style>

 </head>

 <body>

 <div class="box">

    <div class="son"></div>

 </div>

 </body>

 </html>

H5C3--transform实现任何元素居中对齐的更多相关文章

  1. 利用table-cell实现元素居中对齐

    vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用.所以要实现上下垂直居中对齐,可以采用如下样式 display:table-cell;     ...

  2. 【CSS】定义元素的对齐方式

    1.文本内容居中对齐:text-align.扩展用法:父元素嵌套子元素时,且子元素的宽度小于父元素宽度,使用text-align:center,可以实现子元素的居中对齐. <!DOCTYPE h ...

  3. 网页元素居中的n种方法

    导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...

  4. CSS居中对齐

    CSS实现居中对齐的几种方式 页面布局中,居中对齐是我们经常遇到的场景,现在总结几个常用的方式供大家参考. 场景一:按钮文字居中对齐,line-height + text-align html代码: ...

  5. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  6. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  7. 利用CSS实现居中对齐

    1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...

  8. CSS实现元素居中原理解析

    在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...

  9. CSS元素居中汇总

    总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使  margin-left=margin-right  如果设置  marg ...

随机推荐

  1. 在 /proc 里实现文件

    所有使用 /proc 的模块应当包含 <linux/proc_fs.h> 来定义正确的函数. 要创建一个只读 /proc 文件, 你的驱动必须实现一个函数来在文件被读时产生数据. 当 某个 ...

  2. C++：多线程002

    https://blog.csdn.net/morewindows/article/details/7442333 程序描述:主线程启动10个子线程并将表示子线程序号的变量地址作为参数传递给子线程.子 ...

  3. 小程序怎样控制rich-text中的<img>标签自适应

    小程序通过rich-text实现字符串转化为html,即 <rich-text node="{{html}}"></rich-text>.如果html字符串 ...

  4. this指针/常函数、常对象

    this指针引入 类中对象的成员变量和成员函数是分开存储的,sizeof(空class) = 1,另外示例中涉及到字节对齐的问题,double本身的字节为8,int为4,由于字节对齐,int也为8,所 ...

  5. CF148D Bag of mice (期望dp)

    传送门 # 解题思路 ​    ~~这怕是本蒟蒻第一个独立做出来的期望$dp$的题,发篇题解庆祝一下~~.首先,应该是能比较自然的想出状态设计$f[i][j][0/1]$ 表示当前还剩 $i$个白老鼠 ...

  6. 微信H5支付签名校验错误

    参数一定按照我得顺序写,这样可以不用排序,签名在图二. H5支付最坑的一点就是文档坑爹!!!文档中有一个场景信息字段写的是必填,实际上是不需要的!!因为这个字段找了一下午bug,用签名校验工具是成功的 ...

  7. python mysql数据库中 json的存储

    首先数据库里的字段类型需要设置为json: 存储这个json时需要把这个json变为字符串,而且是最外层为单引号,内部字符串为双引号!如图:  所以python脚本中这个字段的字符串应该这样写: 得出 ...

  8. js页面的弹框怎么关闭啊

    1.单纯的关闭window.opener.location.reload(); //刷新父窗口中的网页window.close();//关闭当前窗窗口2.提交后关闭 function save(){d ...

  9. 按钮事件v-on

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  10. Linux虚拟机ip为127.0.0.1的处理

    Redhat系列(Cnetos)打配置文件在/etc/sysconfig/network-scripsts/ifcfg-eth0(在Centos6.5开始就有这种情况了) 打开配置文件找到ONBOOT ...