<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. jsp param动作标签

    param 标签以"名字-值"对的形式为其它标签提供附加消息.这个标签与jsp:include.jsp:forward.jsp:plugin标签一起使用. param 动作标签 & ...

  2. 使用jQuery.makeArray() 将多种类型转换成JS原生Array

    jQuery.makeArray(obj)这个函数从名字上来看非常easy猜出它的用途:应该是用来将传入的对象转换成一个原生array 再看看官网上对它的解释:Convert an array-lik ...

  3. STM32F103频率和AD採集项目总结

    刚刚做了我的第一个嵌入式项目----基于STM32F103的频率和AD採集系统. 是一个大系统的一个部分.没用操作系统,使用库函数编写,尽管东西非常easy.可是对于我这个还没入门的菜鸟来说还是有点难 ...

  4. IE6、IE7的兼容问题

    通常,网页的兼容问题,就是IE6\IE7的问题.表现为错位.换行,不支持CSS3等. 而其中,错位.换行,原因往往在于没有指明元素的width.height. 一般银瓦不告诉他.

  5. awk查找特定字段

    在一行中,查找字段包含exe的: ###########awk.awk######## { for(i=1;i<NF;i++) { if($i ~ /exe/) { print $i } } } ...

  6. 92. extjs specialkey监听回车按键

    转自:http://blog.sina.com.cn/s/blog_647a022e0101401n.html 1 监听表单字段事件: Ext使得对用户某个动作的监听特别简单,诸如单击某个元素或者按下 ...

  7. 5-8 第五天 微信 JS-SDK

    SDK的难点不多,但是容易出错的地方特别多.几乎任何一个环节都会犯错误. 难道没有域名就不让你测了吗?别担心,有公众测试号, 域名这个代理呢是通过QQ浏览器的服务器调试,来绑定这个端口的,把这个服务开 ...

  8. 工具分享3：VMware 10虚拟机、MS-DOS 7.1、安装教程（MS-DOS环境安装）

    VMware 10工具下载地址: 网页下载链接:http://www.xp510.com/xiazai/ossoft/desktools/22610.html MS-DOS .10镜像下载地址: 网页 ...

  9. EditPlus 2：用空格替换制表符

    打开软件点击菜单栏上的Tools(工具),在点击perferences(外观),再点击左边栏的File->Setting & Syntax(文件->设置与符号),再点击右栏的Tab ...

  10. golang单点推送

    package main import ( "encoding/json" "flag" "fmt" "log" &qu ...