<!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. ArrayBlockingQueue 和LinkedBlockQueue

    ArrayBlockingQueue ArrayBlockingQueue是Java多线程常用的线程安全的一个集合,基于数组实现,继承自AbstractQueue,实现了BlockingQueue和S ...

  2. 【转】IOS获取屏窗高度踩坑之window.outerHeight

    近日本人在直接使用window.outerHeight获取屏窗高度时 在iphone 6中出现等于0的情况,从而导致页面发生错误 后找遍代码,测试无数,终于让我逮住了这个该死兼容 window.out ...

  3. 【JZOJ3397】【luoguP4556】雨天的尾巴

    description 深绘里一直很讨厌雨天. 灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切. 虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了几座老房子,几棵老树被连 ...

  4. 廖雪峰Java14Java操作XML和JSON-1XML-3SAX

    SAX:Simple API for XML 基于事件的API import javax.xml.parsers.SAXParser; import javax.xml.parsers.SAXPars ...

  5. dvajs+antd定制主题踩坑记录

    记一下刚刚解决的问题,困扰了几周,期间困兽争斗,甚至想放弃antd组件库.终于出来了,人类科技又进步了(才怪). 首先我按照dva官网建立了项目.里面引入antd的各种组件,因为需要用到一个switc ...

  6. 三次面试总结以及今后的todolist

    金三银四跳槽季,按耐不住蠢蠢欲动的跳槽心,投了好多家的前端招聘,目前面了三家,有把握的零家.古人吾日三省吾身,我没那么高的觉悟,三面省一下自身,太咸鱼了是的我就是这么觉得的. 第一家公司在景田,很远, ...

  7. CF1158F Density of subarrays

    CF1158F Density of subarrays 首先可以发现,有值的p最大是n/c 对于密度为p,每个数至少出现c次,且其实是每出现c个数,就分成一段,这样贪心就得到了p %ywy n/c ...

  8. Quartz：目录

    ylbtech-Quartz:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtec ...

  9. 关于SqlServer的内连接，外链接以及left join,right join之间的一些问题与区别。

    就我个人理解通俗点来说内连接和外连接区别: 内连接 inner join或者 join (被默认为内连接) : 内连接的原理是:先进行语句判断和运行得出结果,然后在将结果连接起来,一般是横着连接. 外 ...

  10. Maven实战08_仓库

    何为Maven仓库 在Maven世界中.任何一个依赖.插件或者项目构建的输出,都可以称之为构件.例如依赖log4j-1.2.15.jar是一个构件,差价maven-compile-plugin-2.0 ...