<!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. WJMZBMR打osu! / Easy

    WJMZBMR打osu! / Easy 有一个由o,x,?组成的长度为n的序列,?等概率变为o,x,定义序列权值为连续o的长度o的平方之和,询问权值的期望, 解 注意到权值不是简单的累加关系,存在平方 ...

  2. Swimming Balls

    Swimming Balls https://vjudge.net/contest/318752#problem/J如果直接算,各种球的情况都不清楚,因为放一个球之后,水位的变化也会影响之前放入的球, ...

  3. 前缀后缀——cf1167E

    想了很久没弄明白,对于边界的情况还是有问题 等题解出了再看看 然后枚举每个后缀r,找到比它小,并且在其左边的前缀l,那么删<=l,r-1的都可以 最后的二分很迷:要多考虑特殊情况:前缀跑到后缀后 ...

  4. LUOGU P2476 [SCOI2008]着色方案

    传送门 解题思路 毒瘤题,,刚开始写了个奇奇怪怪的哈希,结果T了5个点..后来深(kan)入(le)思(ti)考(jie),发现c的范围很小,设$f[a][b][c][d][e][pre]​$表示还能 ...

  5. redis深入学习(三)-----事务、主从复制、jedis

    reids事务 概念 可以一次执行多个命令,本质是一组命令的集合.一个事务中的所有命令都会序列化,按顺序地串行化执行而不会被其它命令插入,不许加塞 作用 一个队列中,一次性.顺序性.排他性的执行一系列 ...

  6. iOS开发本地推送

    1.简介 本地通知是由本地应用触发的,它是基于时间行为的一种通知形式,例如闹钟定时.待办事项提醒,又或者一个应用在一段时候后不使用通常会提示用户使用此应用等都是本地通知. 2.创建UILocalNot ...

  7. nginx使用手册--nginx的命令行参数

    nginx的命令行参数 -? 或者 -h 打印命令行参数帮助信息 -c file 为 Nginx 指定一个配置文件,来代替缺省的. -t 不运行,而仅仅测试配置文件.nginx 将检查配置文件的语法的 ...

  8. Ubuntu中使用Nginx+rtmp搭建流媒体直播服务

    一.背景 本篇文章是继上一篇文章<Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务>文章而写,在上一篇文章中我们搭建了一个点播服务器,在此基础上我们再搭建一个直播服务器, ...

  9. MVC中视图访问的约定

    通常访问视图的时候,都会去选择访问Views文件夹内对应于Controller同名的文件夹下的某一个视图,这个视图对应于这个Controller类的某一个方法. 其实,也可以让这个方法对应于不同名的c ...

  10. Elasticsearch & Kibana with Shield

    Elasticsearch & Kibana with Shield   官方网站: https://www.elastic.co/guide/en/kibana/current/produc ...