<!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. node基础—process对象（管理进程）

    process对象概述 process对象是一个全局对象,可以在任何地方都能访问到他,通过这个对象提供的属性和方法,使我们可以对当前运行的程序的进程进行访问和控制 process 对象是一个 glob ...

  2. centos7下kubernetes（6。kubernetes创建资源的两种方式）

    两种方式:1.命令:2.配置文件 之前我们在部署K8S的时候分别用到了命令和配置文件创建K8s资源: 1.命令方式:kubectl run nginx-deployment --image=nginx ...

  3. Python：Day28 同步锁

    同步锁: Python不是有一把锁了吗?为什么还要加锁? Python解释器的GIL的作用是同一时刻只有一个线程被CPU执行,而同步锁的作用同一时刻只有一个线程对锁定代码块操作 如果不加锁,当多个线程 ...

  4. go标准库的学习-os

    参考https://studygolang.com/pkgdoc 导入方式: import "os" os包提供了操作系统函数的不依赖平台的接口 一开始简单举个例子: packag ...

  5. node.js如何引用其它js文件

    以Java来说,比如要实现第三方存储,我可能需要导入对应的库,以maven为例,使用腾讯云或者七牛云.阿里云,我需要导入对应的maven依赖.再比如,有些时候我们封装某个类,而那个类不在该包下,我们需 ...

  6. Flask 框架 debug=Ture 和Json解码：

    Flask框架常用配置文件: 以下推荐四种方法: (一):创建一个配置类. (二):正常代码配置文件. 接下下来两种方法需要新建文件: 步骤为: 1:在当前目录下新建一个文件,名字为:config.i ...

  7. (折扣计算)需求说明：普通顾客购物满100元打9折；会员购物打8折；会员购物满200元打7.5折（判断语句if-else和switch语句的嵌套结

    package com.summer.cn; import java.util.Scanner; /** * @author Summer *折扣计算 需求说明:普通顾客购物满100元打9折:会员购物 ...

  8. 环境部署（五）：Linux下安装Gradle

    Gradle是一个基于Apache的Ant和Maven的项目自动化构建工具,相比于Ant和Maven的局限性,Gradle可以更好的帮助管理项目中的差异.依赖.编译.打包.部署. 可以自定义满足自己需 ...

  9. face detection[DSFD]

    本文来自<DSFD: Dual Shot Face Detector>,时间线为2018年10月,是南理工Jian Li在腾讯优图实验室实习时候的作品.在WIDER FACE,FDDB上效 ...

  10. JavaEE学习之Spring Security3.x——模拟数据库实现用户，权限，资源的管理

    一.引言 因项目需要最近研究了下Spring Security3.x,并模拟数据库实现用户,权限,资源的管理. 二.准备 1.了解一些Spring MVC相关知识: 2.了解一些AOP相关知识: 3. ...