<!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(一)：【重磅】Spring Boot 2.0权威发布

    http://www.ityouknow.com/springboot/2018/03/01/spring-boot-2.0.html 就在今天Spring Boot2.0.0.RELEASE正式发布 ...

  2. postgresql命令

    连接数据库, 默认的用户和数据库是postgrespsql -U user -d dbname 切换数据库,相当于mysql的use dbname\c dbname列举数据库,相当于mysql的sho ...

  3. centos7下安装docker（14安装docker machine）

    之前我们做的实验都是在一个host上面的,其实在真正的环境中有多个host,容器在这些host上面启动,运行,停止和销毁,相关容器会通过网络相互通信,无论他们是否运行在相同的host上面. 对于这种歌 ...

  4. UVA208-Firetruck(并查集+dfs)

    Problem UVA208-Firetruck Accept:1733  Submit:14538 Time Limit: 3000 mSec  Problem Description The Ce ...

  5. centos7 mongodb安装

    参考文档 http://www.runoob.com/mongodb/mongodb-connections.html https://www.cnblogs.com/layezi/p/7290082 ...

  6. MemCache在.NET中使用Memcached.ClientLibrary详解 转发 https://www.cnblogs.com/li150dan/p/9529112.html

    本文说明:memcached分布式缓存的负载均衡配置比例,数据压缩,socket的详细配置等,以及在.net中的常用方法 首先下载客户端的3个dll,ICSharpCode.SharpZipLib.d ...

  7. 如何理解render: h => h(App)

    学习vuejs的时候对这句代码不理解 new Vue({ el: '#app', router, store, i18n, render: h => h(App) }) 查找了有关资料,以下为结 ...

  8. P3372 【模板】线段树 1

    题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个 ...

  9. keepalived+lvs子网掩码造成VIP切换故障 + vrrp_script+track_script

    keepalived+lvs子网掩码造成VIP切换故障 架构:keepalived+lvs ,前端调度器是双主模型 现象:keepalived手动停掉一台,但是虚拟IP不会切换 整体网络是24位 VI ...

  10. JavaEE学习之Spring AOP

    一.基本概念 AOP——Aspect-Oriented Programming,面向切面编程,它是spring框架的一个重要组成部分.一般的业务逻辑都有先后关系,我们可以理解为纵向关系,而AOP关注的 ...