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/ ...
随机推荐
- JavaScript在网页中使用以及注意事项
<script>标签的解析<script>xxx</script>这组标签,是用于在 html 页面中插入 js 的主要方法.它主要有以下几个属性:charset: ...
- nosql：文件存储和sql数据库存储形式之外的存储系统都是nosql
为了设计一个比较好的磁盘缓存,我调查了大量的开源库,包括 TMDiskCache.PINDiskCache.SDWebImage.FastImageCache 等,也调查了一些闭源的实现,包括 NSU ...
- UVA1607-Gates（思维+二分）
Problem UVA1607-Gates Accept: 111 Submit: 767Time Limit: 3000 mSec Problem Description Input The fi ...
- UVA1533-Moving Pegs（BFS+状态压缩）
Problem UVA1533-Moving Pegs Accept:106 Submit:375 Time Limit: 3000 mSec Problem Description Input ...
- Python 属性与方法 概念理解
属性与方法 attribute(属性)是class(类)中的成员变量,而method(方法)则是class(类)中的function(函数). 也可以理解,属性就类变量,方法就是类函数. 类中的变量就 ...
- 3D打印社区
http://mc.dfrobot.com.cn/forum.php?mod=forumdisplay&fid=100&filter=typeid&typeid=9
- 环境部署（七）：linux下Jenkins+Git+JDK持续集成
前面几篇博客介绍了linux下安装Jenkins.Git.JDK以及Git基础教程和Git关联github等内容,这篇博客,介绍下如何在linux服务器中利用它们构建持续集成环境... 一.准备工作 ...
- face recognition[variations of softmax][L-Softmax]
本文来自<Large-Margin Softmax Loss for Convolutional Neural Networks>,时间线为2016年12月,是北大和CMU的作品. 0 引 ...
- Generative Adversarial Nets[AAE]
本文来自<Adversarial Autoencoders>,时间线为2015年11月.是大神Goodfellow的作品.本文还有些部分未能理解完全,不过代码在AAE_LabelInfo, ...
- SpringMVC自动封装List对象 —— 自定义参数解析器
前台传递的参数为集合对象时,后台Controller希望用一个List集合接收数据. 原生SpringMVC是不支持,Controller参数定义为List类型时,接收参数会报如下错误: org.sp ...