<!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. 关于图片的Base64编码

    什么是Base64编码 Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. base64编码就是长得像下面这样子的代 ...

  2. Java8时间的简单时间

    package com.java8.date; import org.junit.Test; import java.text.SimpleDateFormat; import java.time.* ...

  3. P1843 奶牛晒衣服（二分）

    思路:就是一个模板,只是找最小化而已.在判断函数里面:当湿度<=x*A不判断, 反之sum+=(a[i]-x*A)/B+(a[i]-x*A)%B?1:0; #include<iostrea ...

  4. 微信硬件平台（九） 自己的服务器从微信获取token并保存txt

    1安装crontab: yum install crontabs 说明: service crond start //启动服务 service crond stop //关闭服务 service cr ...

  5. ESP8266 mDNS

    https://circuits4you.com/2017/12/31/esp8266-mdns/ 本教程介绍如何使用ESP8266进行多播DNS?在网络世界中,很难记住每个网站和计算机的IP地址,解 ...

  6. 无线智联-程序篇：让python与matlab牵手

    python和matlab本来是青梅竹马的好基友,奈何相爱相杀,经常放在一起做对比,就好比经常听到的,“你看看隔壁xx家的孩子”,其实每个孩子都有每个孩子的优点,如果能发挥每个孩子的优点,岂不是更好. ...

  7. IDE安装Lombok插件提高开发效率

    Lombok官方api:https://projectlombok.org/features/index.html 使用lombok之后,省去了许多没必要的get,set,toString,equal ...

  8. Spark性能调优

    Spark性能优化指南——基础篇 https://tech.meituan.com/spark-tuning-basic.html Spark性能优化指南——高级篇 https://tech.meit ...

  9. Storm-HA 配置

    进入storm/conf目录,修改storm.yaml配置文件为如下内容: # zookeeper ip storm.zookeeper.servers: - "192.168.7.108& ...

  10. mybatis百科-结果集映射类ResultMap

    目录 1 成员变量 2 构造函数 3 其他函数 3.1 setter 和 getter 函数 4 静态内部类 4.1 成员变量 4.2 构造函数 4.3 建造者相关的函数 4.4 获取配置的构造方法参 ...