<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. SegmentFault 巨献 1024 程序猿游戏「红岸的呼唤」第一天任务攻略

    今天一不小心在微博上看到了SegmentFault的一条微博: 眼看今天就要过去了,那在这里说一下我的解题过程(事实上大家都知道了吧-＝). 高速传送门:http://segmentfault.com ...

  2. Android 线程 Looper.prepare()、Looper.loop() 使用

    优化项目过程中发现了一个非常Low的问题,整理一下.备忘: 说问题之前先看下HandlerThread的定义 一个封装了looper的线程:   Looper用于封装了android线程中的消息循环. ...

  3. Android Fragment和Activity的交互介绍

    Fragment和Activity的交互 一个Fragment的实例总是和包括它的Activity直接相关. fragment能够通过getActivity() 方法来获得Activity的实例.然后 ...

  4. Mongodb---记一次事故故障

    2014.06.19.001---故障报告 事故发生时间 事故简述 事故责任方 是否解决 19:21-20:15 IISserverD盘即将溢出 是 一.事故描写叙述: 在19:21收到警报.显示II ...

  5. Android多级目录树

    本例中目录树的菜单数据是从json数据中获取,首先建立一个菜单实体类  MenuTree package com.gao.tree; /** * 菜单树的各级菜单实体类 * * @author tjs ...

  6. 联想Thinkpad L460安装Win7 64位

    单位发了L460,自带的系统为win10,但是涉及到很多工作以及客户都是在win7环境下,所以必须安装win7的系统,经过一番折腾,终于装好了. 主要顺序如下: 1,制作WINPE启动盘,如大白菜,老 ...

  7. 0420-mysql命令（数据库操作层级,建表,对表的操作）

    注意事项: 符号必须为英文. 数据库操作层级: 建表大全: #新建表zuoye1:drop table if exists zuoye1;create table zuoye1(    id int ...

  8. 快速搭建ELK集中化日志管理平台

    由于我们的项目是分布式,服务分布于多个服务器上,每次查看日志都要登录不同服务器查看,而且查看起来还比较麻烦,老大让搭一个集中化日志管理的东西,然后就在网上找到了这个东西ELK ELK就是elastic ...

  9. golang闭包，传统斐波那契

    package main import (    "fmt") func main() {    f := fibonacci()    for i := 0; i < 10 ...

  10. 题解报告：hdu 1847 Good Luck in CET-4 Everybody!（入门SG值）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1847 Problem Description 大学英语四级考试就要来临了,你是不是在紧张的复习?也许紧 ...