<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. 1366 xth 的第 12 枚硬币

    1366 xth 的第 12 枚硬币  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 传说 xth 曾 ...

  2. jQery总结01

    1 jQuery 的基本语法结构是什么? 2 $(document).ready() 与 window.onload 有什么区别? 3 如何实现 DOM 对象和 jQuery对象间的转化?

  3. How to do IF NOT EXISTS in SQLite

    http://stackoverflow.com/questions/531035/how-to-do-if-not-exists-in-sqlite How about this? INSERT O ...

  4. 95.Extjs 表单中自定义的验证规则 VTypes

    1 Ext.onReady(function(){ Ext.QuickTips.init(); //重写 (自定义)xtype Ext.apply(Ext.form.VTypes,{ repetiti ...

  5. diaowen Maven Webapp

    五月 , :: 上午 org.apache.catalina.startup.VersionLoggerListener log INFO: Server version: Apache Tomcat ...

  6. [Apple开发者帐户帮助]三、创建证书（3）创建企业分发证书

    作为Apple Developer Enterprise Program的成员,您可以创建多个企业分发证书. 所需角色:帐户持有人或管理员. 在证书,标识符和配置文件中,从左侧的弹出菜单中选择iOS, ...

  7. Rancher 2：添加 NFS client provisioner 动态提供 Kubernetes 后端存储卷

    一.前提说明 1.说明: NFS client provisioner 利用 NFS Server 给 Kubernetes 作为持久存储的后端,并且动态提供PV. 默认 rancher 2 的存储类 ...

  8. CAS配置(3)之restful-api接入接口

    第一步,cas服务端对api接口支持 在cas-server-webapp下 pom.xml添加如下依赖 <dependency> <groupId>org.jasig.cas ...

  9. Python 2：str.title()（使字符串每个单词首字母大写）

    name = "hello,world! hello,python!" print(name.title()) #单词首字母大写 运行结果将会是:Hello,World!Hello ...

  10. 虚拟机下不能运行gazebo

    bug描述: VMware: vmw_ioctl_command error Invalid argument. 解决方式:设置环境变量 export SVGA_VGPU10=0 或者 echo &q ...