absoulue与relative配合定位盒子居中问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>absoulue与relative配合定位盒子居中问题</title>
<style type="text/css">
*{
margin: 0;
background-color: yellow;
}
/* 如何把-一个盒子放到页面中央 */
.box{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
bottom: 50%;
margin-top: -50px;
margin-left: -50px;
z-index: 2;
}
/*2.如何把2个div块同时居中*/
.div1{
width: 500px;
height: 300px;
background-color: red;
position: absolute; ;
left: 50%;
top: 50%;
/*居中的只是一个点，所以需要往左走250，往上走150*/
margin-left: -250px;
margin-top: -150px;
}
.div2{
width: 200px;
height: 100px;
background-color:green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px;
}
</style>
<script>
window.onload=function(){
var obj=document.getElementById('ceshi')
obj.onclick=function(){
console.log('123');
alert('我一直在寻找找到了你便找到了整个世界')
}
}
</script>
</head>
<body>
<div class="box" id="ceshi"></div>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
absoulue与relative配合定位盒子居中问题的更多相关文章
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- 0029 定位：position（相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性）
目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
- 《Web开发中让盒子居中的几种方法》
一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...
- CSS之盒子居中的方法
一.盒子垂直居中的方法 1.先让盒子的上下边缘和父盒子的水平中心线重叠,,然后再让子盒子往回移动自身一半的距离 <div class="father"> // 结构 & ...
- css盒子居中
方法1(margin: 0 auto)<!DOCTYPE html> <html lang="en"> <head> <meta char ...
- CSS 相对|绝对(relative/absolute)定位系列（一）
一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- HTML连载41-水平居中的注意点、盒子居中和内容居中
一.盒子模型练习 我们有个需求: 创建两个盒子,大盒子嵌套一个小盒子,大盒子是红色的,小盒子是蓝色的,并且小盒子在大盒子中是居中的. <!DOCTYPE html> <html la ...
- CSS——盒子居中显示
嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...
随机推荐
- [洛谷P4012] [网络流24题] 深海机器人问题
Description 深海资源考察探险队的潜艇将到达深海的海底进行科学考察. 潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动. 深海机器人在移动中还必须沿途采集海底生 ...
- 7、python基本数据类型之散列类型
前言:python的基本数据类型可以分为三类:数值类型.序列类型.散列类型,本文主要介绍散列类型. 一.散列类型 内部元素无序,不能通过下标取值 1)字典(dict):用 {} 花括号表示,每一个元素 ...
- 20200102模拟赛 问题A 排列
先说句新年好哈哈哈 今年又是颓废的一年呢... (开始就满满负能量真好) 分析: 真是有趣的数学递推找规律问题呢... 考场上没想出来,然后n2^n的状压也想不到 索性20*20直接打表2333... ...
- c#数字图像处理（八）图像平移
使图像沿水平方向和垂直方向移动 /// <summary> /// 图像平移 /// </summary> private void translation_Click(obj ...
- Python读取字典(Dictionary)内数据的方法
读取json后,数据类型为字典,对字典内数据的提取又有不同的方法,根据不同的字典类型 上图可以看到有”[]”,”{}” python语言最常见的括号有三种,分别是:小括号( ).中括号[ ]和大括号也 ...
- [SDOI2010]魔法猪学院（A*，最短路）
[SDOI2010]魔法猪学院(luogu) Description 题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig ...
- 吉哥系列故事——恨7不成妻（数位dp)
吉哥系列故事--恨7不成妻 传送门 Problem Description 单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥 ...
- 机器学习-计算机视觉和卷积网络CNN
概述 对于计算机视觉的应用现在是非常广泛的,但是它背后的原理其实非常简单,就是将每一个像素的值pixel输入到一个DNN中,然后让这个神经网络去学习这个模型,最后去应用这个模型就可以了.听起来是不是很 ...
- 双括号（（）），shell与C++的桥梁
使用语法: ((表达式))用来扩展Shell中的算术运算,以及赋值运算,扩展for,while,if条件测试运算. 注意点: 1.在双括号结构中,所有的表达式可以像c语言一样,如a++,b-- 2.在 ...
- centos7.6+python3+apache2.4+django2.1.2网站部署总结
本次网站部署是使用了django2.1.2版本部署,由于centos自带的Python2.7不支持django2.0以上版本,故需要安全python3的环境.python3.apache的安装不做具体 ...