<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>position & transform: translate(-50%, -50%) 实现块元素百分比下居中</title>

<style>

html,body {

        width: 100%;

        height: 100%;

        position: relative;

    }

    .box {

        width: 800px;

        height: 500px;

        background-color: #FFD914;

    }

    .inside {

        width: 60%;

        height: 30%;

        background-color: red;

    }

    .center {

        position: absolute;

        top: 50%;

        left: 50%;

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

    }

</style>

</head>

<body>

    <div class="box center">

        <div class="inside center"></div>

    </div>

</body>

</html>

transform: translate(-50%, -50%) 实现块元素百分比下居中的更多相关文章

  1. transform:translate(-50%,-50%)实现水平垂直居中

    .content {    padding:10px;    background:green;    color:#fff;    position:absolute;    top:50%;    ...

  2. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  3. 巧用CSS居中未知高度的块元素

    在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .paren ...

  4. div块元素垂直水平居中方法总结

    1.已知块级元素的宽和高,使用绝对定位+外边距设定水平垂直居中. 父元素position:relative,子元素position:absolute;top:50%;left:50%;margin-t ...

  5. CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变

    CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : tr ...

  6. 让块元素在div中水平居中，并且垂直居中的五种方法

    在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...

  7. 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

    今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素displ ...

  8. css布局------块元素水平垂直居中的四种方法

    HTML <div class="parent answer-1"> <div></div></div> CSS .parent { ...

  9. 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. （转）Spring Boot 2 (四)：使用 Docker 部署 Spring Boot

    http://www.ityouknow.com/springboot/2018/03/19/spring-boot-docker.html Docker 技术发展为微服务落地提供了更加便利的环境,使 ...

  2. MySQL高级知识系列目录

    MySQL高级知识(一)——基础 MySQL高级知识(二)——Join查询 MySQL高级知识(三)——索引 MySQL高级知识(四)——Explain MySQL高级知识(五)——索引分析 MySQ ...

  3. SQL BETWEEN 操作符

    BETWEEN 操作符在 WHERE 子句中使用,作用是选取介于两个值之间的数据范围. BETWEEN 操作符 操作符 BETWEEN ... AND 会选取介于两个值之间的数据范围.这些值可以是数值 ...

  4. android studio 定位具体的错误原因

    编译一个数据监测APP的时候出现了报错: Error:Compilation failed; see the compiler error output for details. 在网上查到方法如下: ...

  5. JavaScript 浮点数运算的精度问题

    问题描述 在 JavaScript 中整数和浮点数都属于 Number 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此. 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 ...

  6. hadoop学习笔记肆--元数据管理机制

    1.首先,认识几个名词 (1).NameNode中读.写.以及DataNode映射等信息叫做“元数据” ,NameNode元数据存放位置有.内存.fsimage.edits log三个位置. (2). ...

  7. mybatis错误之org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    玩了MyBatis差不多有两年了,中间也玩过MyBatis-Plus,这个MyBatis-Plus其实与MyBatis的区别并不大.今天写博客业务代码的时候,犯一个初学者犯过的错误. 错误信息如下:o ...

  8. mysql从5.5直接升级到5.7后，执行mysql_upgrade速度很慢且执行结束后数据目录大小增加一倍及 mysqlpump备份出现1577错误

    mysql官网不支持夸大版本升级,比如跳过5.6直接升级到5.7,但由于一些客观原因,项目需要从5.5直接升级到5.7,以下是具体操作 1.备份之前mysql,(数据量少,可直接拷贝安装目录及data ...

  9. 20175310 《Java程序设计》第6周学习总结

    20175310 <Java程序设计>第6周学习总结 本周博客: <20175310 类定义 - 20175310xcy - 博客园 >https://www.cnblogs. ...

  10. Long类型参数传到前端精度丢失的解决方案

        由于公司数据库表的id是利用雪花算法生成的,所以实体类里面定义的数据类型为Long.但是这个数据传到前端时,发生了精度丢失的现象.本文记录了从java后端的角度如何解决这个精度丢失的问题,便于 ...