1. <body>
  2.     <div class="center">
  3.         ....
  4.     </div>
  5. </body>

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

  1. .center{
  2.     text-align: center;
  3.     background-color: #fff;
  4.     border-radius: 20px;
  5.     width: 300px;
  6.     height: 350px;
  7.     position: absolute;
  8.     left: 50%;
  9.     top: 50%;
  10.     transform: translate(-50%,-50%);
  11. }

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. cocos2dx编译安卓版本号查看C++错误

    首先,在Mac以下相关软件路径,打开"终端",然后输入  pico .bash_profile  回车 export COCOS2DX_ROOT=/Users/bpmacmini0 ...

  2. HotSpotVM 线程实现浅析

    今天来看下HotSpotVM在Linux下的线程模型. Thread.start HotSpot Runtime Overview 中说道, There are two basic ways for ...

  3. 好记性不如烂笔头——.NET运行原理

    WINDOWS中运行的代码,分为托管代码和非托管代码. .NET环境中运行的代码就是托管代码,.NET环境外运行的就是非托管代码. 我们开发的时候,会对源代码进行编译.但其实,对于托管代码,我们编译出 ...

  4. golang LMDB入门例子——key range查询

    如下,使用gomb库 package main import ( "bytes" "fmt" "io/ioutil" "os&qu ...

  5. C# 设置百分比保留2位数

    double a=50; double b=100; 没有小数部分Label1.Text = (a   /   (a+b)).ToString("0%")   两位小数Label2 ...

  6. Winform 异步调用2 时间

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. Windows:Word,PPT,EXCEL com+组件配置

    本文所涉及到配置前提: 服务器必须安装Office套件(Word,PPT,Excel) 第一部分 Word Com+组件权限配置 1.cmd模式输入dcomcnfg 2.找到Microsoft Wor ...

  8. Git教程(3)git工作区与文件状态及简单示例

    基础 目录: working driectory  工作目录,就是我们的工作目录,其中包括未跟踪文件及暂存区和仓库目录. staging area   暂存区,不对应一个具体目录,其实只是git di ...

  9. CSS多列布局（实例）

    前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...

  10. 前端编码规范（2）HTML 规范

    文档类型 推荐使用 HTML5 的文档类型申明: <!DOCTYPE html> (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及它的属性,比如 a ...