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/ ...
随机推荐
- 16.ajax_case03
# 抓取非小号的图表接口 # https://www.feixiaohao.com/currencies/raiden-network-token/ import requests import js ...
- java语言的特征
运行时:反射与内省+派发机制: 额外的多态支持:注解: 语法改进:内部类与匿名类.匿名函数: 线程支持改进: 类加载机制? aop的支持: bean?
- 正则表达式工具RegexBuddy
1 下载 RegexBuddy 并安装 安装后的界面如下: 2 切换布局 点击右上角的彩色格子图标,选择 Side by Side Layout: 这种布局的好处是,Create 面板 ...
- 【转】解决在Android设备播放音频与其他应用重音的问题，并监听耳机的控制按钮
概述 在安卓开发中免不了需要播放一点音乐了,音频了.但是这时候有别的应用正在播放,这时候就会出现重音的现象,完全影响用户体验,我们的项目就遇上了这样的尴尬,然后查找了一些文档,记录一下: 管理音频焦点 ...
- pytorch torchvision.ImageFolder的使用
参考:https://pytorch-cn.readthedocs.io/zh/latest/torchvision/torchvision-datasets/ torchvision.dataset ...
- matlab中fix函数，floor函数，ceil函数
1)fix(n)的意义是取小于n的整数(是向零点舍入的意思是往零的方向上靠),这是一类应用在整数取值上的函数,就如同以前我们所研究的求整问题,例如,fix(pi)=3;fix(3.5)=3;fix(- ...
- [TPYBoard - Micropython之会python就能做硬件 8] 学习使用超声波模块制作避障小车
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.实验器材 1.TPYboard V102板 一块 2.电机驱动模块L2 ...
- Java多线程学习(二)---线程创建方式
线程创建方式 摘要: 1. 通过继承Thread类来创建并启动多线程的方式 2. 通过实现Runnable接口来创建并启动线程的方式 3. 通过实现Callable接口来创建并启动线程的方式 4. 总 ...
- 调整代码生成工具Database2Sharp的Winform界面生成，使其易于列表工具栏的使用。
在Winform界面开发的时候,有时候我们客户喜欢把功能放在列表界面的顶部,这样界面和功能整齐放置,也是一种比较美观的方式,基于这种方式的考虑,改造了代码生成工具的Winform界面生成规则,把增删改 ...
- mybatis百科-列映射类ResultMapping
目录 1 成员变量 2 构造函数 3 其他函数 3.1 setter 和 getter 函数 3.2 equals 和 hashCode 函数 3.3 toString 函数 4 内部类 Builde ...