<body>

    <div class="center">

        ....

    </div>

</body>

让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了

.center{

    text-align: center;

    background-color: #fff;

    border-radius: 20px;

    width: 300px;

    height: 350px;

    position: absolute;

    left: 50%;

    top: 50%;

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

}

CSS 利用transform达到居中效果的更多相关文章

  1. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  2. CSS变形transform(2d)

    前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...

  3. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  4. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  5. 讨论CSS中的各类居中方式

    今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...

  6. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

  7. CSS垂直水平完全居中手册

    水平居中 内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } 块级元素(blo ...

  8. CSS中的各种居中方法总结

    CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...

  9. css绝对定位元素实现居中的几个方法

    一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...

随机推荐

  1. 《Java程序猿面试笔试宝典》之字符串创建与存储的机制是什么

    在Java语言中.字符串起着非常关键的数据.字符串的声明与初始化主要有例如以下两种情况:(1) 对于String s1=new String("abc")语句与String s2= ...

  2. UVa 642 - Word Amalgamation

    题目:给你一个单词列表.再给你一些新的单词.输出列表中又一次排列能得到此新单词的词. 分析:字符串.对每一个字符串的字母排序生成新的传f(str).总体排序,用二分来查找就可以. 说明:注意输出要满足 ...

  3. COCOS学习笔记--Button类及其相关控件属性

    一.Button介绍 Button就是button.Cocos中提供了Button类对button进行相关的操作.我们看一下Button类继承关系图: 能够看到.Button是继承自Widget类,W ...

  4. 【JLOI 2014】 松鼠的新家

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3631 [算法] 树上差分 [代码] #include<bits/stdc++. ...

  5. 【HDU 6162】 Ch’s gift

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6162 [算法] 离线树剖 我们知道,u到v路径上权值为[A,B]的数的和 = u到v路径上权值小于 ...

  6. B1922 [Sdoi2010]大陆争霸 最短路

    我一直都不会dij的堆优化,今天搞了一下...就是先弄一个优先队列,存每个点的数据,然后这个题就加了一点不一样的东西,每次的最短路算两次,一次是自己的最短路,另一次是机关的最短路,两者取最大值才是该点 ...

  7. Java 8 实战 P2 Functional-style data processing

    目录 Chapter 4. Introducing streams Chapter 5. Working with streams Chapter 6. Collecting data with st ...

  8. 图结构练习—BFSDFS—判断可达性（BFS）

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2138 注意该图为有向图,1000个点应该最多有 ...

  9. hdu 3037Saving Beans(卢卡斯定理)

    Saving Beans Saving Beans Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  10. 自己对javascript闭包的了解

    目录 闭包的概念 谈谈函数执行环境,作用域链以及变量对象 闭包和函数柯里化 闭包造成的额外的内存占用  (注意我说的不是“内存泄漏”!) 闭包只能取得包含函数的最后一个值 正文 前言: 在这篇文章里, ...