<!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. (转) Vultr能Ping但是SSH无法连接

    原文链接:https://www.bestqliang.com/2018/06/27/Vultr%E8%83%BDPing%E4%BD%86%E6%98%AFSSH%E6%97%A0%E6%B3%95 ...

  2. 关于IOC

    1. [调侃]IOC前世今生 http://www.cnblogs.com/showjan/p/3950989.html#!comments 2. 使用ConfigurationManager类 读写 ...

  3. 使用Parallel.Invoke并行你的代码

    优势和劣势 使用Parallel.Invoke的优势就是使用它执行很多的方法很简单,而不用担心任务或者线程的问题.然而,它并不是适合所有的场景.Parallel.Invoke有很多的劣势 如果你使用它 ...

  4. VS2012 TFS 解决计算机改名无法连接TFS的问题

      闲着没事改了下计算机名字,结果造成TFS无法连接. 报错讯息如下: ---------------------------Microsoft Visual Studio-------------- ...

  5. php中的线程、进程和并发区别

    https://mp.weixin.qq.com/s/Ps5w13TTmpnZx-RPWbsl1A 进程 进程是什么?进程是正在执行的程序:进程是正在计算机上执行的程序实例:进程是能分配给处理器并由处 ...

  6. Servlet和模本办法

    抽象类HttpServlet,提供7个子方法的默认实现,当我们手写Servlet只需要继承HttpServlet并替换相应的do方法来完成自己的业务逻辑即可. 我们一般的实现方法: public My ...

  7. 安装office2019

    win10系统安装office2019 安装文件下载 https://pan.baidu.com/s/1VnqJ-hNwysPKBhdzE3FSww#list/path=%2F&parentP ...

  8. springboot新增jsp的支持

    一.添加依赖 <!-- 添加对jsp的支持 --> <!-- web 依赖 --> <dependency> <groupId>org.springfr ...

  9. mysqlbinlog: unknown variable 'default-character-set=utf8'

    [xxx@dbhost log]$ mysqlbinlog mysql-bin. mysqlbinlog: unknown variable 'default-character-set=utf8' ...

  10. urllib与urllib2的学习总结

    先啰嗦一句,我使用的版本是python2.7,没有使用3.X的原因是我觉得2.7的扩展比较多,且较之前的版本变化不大,使用顺手.3.X简直就是革命性的变化,用的蹩手.3.x的版本urllib与urll ...