<!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. MapReduce模型简介

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

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

  3. SpringBoot_Mybatis MyBatisPlus

    一.SpringBoot中使用Mybatis springBoot中使用mybatis跟以前spring中使用方法一样. 1.mybatis配置: spring: datasource: url: j ...

  4. JUC 一 CopyOnWriteArrayList 和 CopyOnWriteArraySet

    java.util.concurrent; 简介 CopyOnWriteArrayList是一个线程安全的ArrayList,通过内部的volatile数组和显式锁ReentrantLock来实现线程 ...

  5. centos7.2安装apache比较简单，直接上代码

    centos7.2安装apache比较简单,直接上代码 1.安装 yum install httpd    2.启动apache systemctl start httpd.service    3. ...

  6. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  7. centos7下Elasticsearch5.2.2和head 插件环境搭建

    ElasticSearch是一个基于Lucene构建的开源,分布式,RESTful搜索引擎.设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便.支持通过HTTP使用JSON进行数据索引 ...

  8. Spring注解驱动(上)

    记录常用的spring注解 1.@Configuration 和 @Bean spring中可以使用xml 的方式进行配置, 也可以使用 @ Configuration 来指定一个类为配置类, 并使用 ...

  9. <随便写>佛祖,哈哈!

    print(" _ooOoo_ ") print(" o8888888o ") print(" 88 . 88 ") print(" ...

  10. 【error】vue-style-loader didn't discriminate between server and client

    出现这个bug的时候,设置为false