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/ ...
随机推荐
- Spring中事务配置以及事务不起作用可能出现的问题
前言:在Spring中可以通过对方法进行事务的配置,而不是像原来通过手动写代码的方式实现事务的操作,这在很大程度上减少了开发的难度,本文介绍Spring事务配置的两种方式:基于配置文件的方式和基于注解 ...
- 缓存数据库Memcache
为什么用缓存数据库 MySQL:将数据存储在磁盘上,数据写入读取相对较慢 Memcached:将数据存在内存中的数据库,数据读写都快,但是数据容易丢失 数据存储,数据仓库选择MySQL这种磁盘的数据库 ...
- 2.01-request_header
import urllib.request def load_baidu(): url= "https://www.baidu.com" header = { #浏览器的版本 &q ...
- 11175-From D to E and Back（思维）
Problem UVA11175-From D to E and Back Accept: 164 Submit: 607Time Limit: 3000 mSec Problem Descript ...
- 转://使用insert插入大量数据的总结
使用insert插入大量数据的个人经验总结在很多时候,我们会需要对一个表进行插入大量的数据,并且希望在尽可能短的时间内完成该工作,这里,和大家分享下我平时在做大量数据insert的一些经验. 前提:在 ...
- Jenkins控制台显示乱码
方案: 解决控制台中文乱码问题: 点击左侧“系统管理”——右侧选择“系统设置”——“全局属性”,选择第一项:Environment variables,键值对列表,点击增加: 键:LANG 值:zh. ...
- python3 day04 大纲
上节课内容回顾: 1. 小数据池 存储数据. 共享小数据池 int,str, bool == 和 is区别: == 判断的是两边的值 is 左右两端的内存地址 2. 深浅拷贝 1. = 没有创建新对象 ...
- Uncaught ReferenceError: layer is not defined
错误详细信息,如下: Uncaught ReferenceError: layer is not defined' 关键词就是not defined 未定义,那么解决方案就是给它定义. 原来的问题代码 ...
- 【P1941】 飞扬的小鸟
题目描述 游戏界面是一个长为 nn,高为 mm 的二维平面,其中有 kk 个管道(忽略管道的宽度). 小鸟始终在游戏界面内移动.小鸟从游戏界面最左边任意整数高度位置出发,到达游戏界面最右边时,游戏完成 ...
- Java关键字(四)——final
对于Java中的 final 关键字,我们首先可以从字面意思上去理解,百度翻译显示如下: 也就是说 final 英文意思表示是最后的,不可更改的.那么对应在 Java 中也是表达这样的意思,可以用 f ...