transform: translate(-50%, -50%) 实现块元素百分比下居中
<!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%) 实现块元素百分比下居中的更多相关文章
- transform:translate(-50%,-50%)实现水平垂直居中
.content { padding:10px; background:green; color:#fff; position:absolute; top:50%; ...
- CSS 各类 块级元素 行级元素 水平 垂直 居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...
- 巧用CSS居中未知高度的块元素
在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .paren ...
- div块元素垂直水平居中方法总结
1.已知块级元素的宽和高,使用绝对定位+外边距设定水平垂直居中. 父元素position:relative,子元素position:absolute;top:50%;left:50%;margin-t ...
- CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变
CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : tr ...
- 让块元素在div中水平居中，并且垂直居中的五种方法
在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...
- 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖
今天上午学习了内联元素于与块元素的转换 个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素displ ...
- css布局------块元素水平垂直居中的四种方法
HTML <div class="parent answer-1"> <div></div></div> CSS .parent { ...
- 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- .net core 2.1 Razor 超快速入门
以下过程如有不明白的,可参考:https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/?view=aspnetcore-2 ...
- BeautifulSoup类
from bs4 import BeautifulSoup soup1 = BeautifulSoup("<html>data</html>"," ...
- Leetcode：0002（两数之和）
LeetCode:0002(两数之和) 题目描述:给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表.你可以假设除了数字 0 之外,这两 ...
- [SHOI2015]自动刷题机
嘟嘟嘟 这题就比较水了,毕竟只评了个蓝. 想一下发现满足单调性,所以可以二分找最大值. 但是最小值怎么办?刚开始我很zz的以为只要把判断条件从大于等于改成小于等于就行了,后来发现根本不对. 想了想因为 ...
- Linux：Day7(下) 磁盘管理、文件系统管理
Linux入门 Linux系统管理: 磁盘管理.文件系统管理 RAID基本原理.LVM2 网络管理:TCP/IP协议.Linux网络属性配置 程序包管理:rpm,yum 进程管理:htop,glanc ...
- masm的调试命令（debug）
-u命令:查看汇编代码: -t命令:执行下一条语句 -g + 的内存:跳转到该内存所对应的语句(再用t命令执行该条命令) -r命令:查看寄存器的内容(后可直接接寄存器的名称,就只查看该寄存器的内容) ...
- 应对WannaCry勒索危机之关闭445端口等危险端口——以本人Windows7系统为例
应对WannaCry勒索危机之关闭445端口等危险端口--以本人Windows7系统为例 近日,全球范围内爆发WannaCry勒索病毒危机 我国很多大学纷纷中招.受灾严重,甚至连刘老师的电脑也-- 拿 ...
- day14（1）--递归、匿名函数、内置函数
一.递归 定义:本质上是回溯和递推 回溯:询问答案的过程 递推:推出答案的过程 前提: 回溯到一个有结果的值开始递推 回溯与递推的条件要有规律 方式: 直接递归:自己调用自己 间接递归:通过别人来调用 ...
- P2251 质量检测--洛谷luogu
传送门 题目描述 为了检测生产流水线上总共N件产品的质量,我们首先给每一件产品打一个分数A表示其品质,然后统计前M件产品中质量最差的产品的分值Q[m] = min{A1, A2, ... Am},以及 ...
- 【vue】iView-admin后台管理系统
1.目录手册解析 2.跨域解决(axios访问服务器由于前端地址和后端地址不同源会出现跨域问题) 实例2 3.动态菜单导航+权限 4.webstorm 配置 Eslint 代码检查和自动修复