今天又学了一种新方法,其实不算新,只是我不知道而已,想想学了一年多,现在什么动效都能写点出来了,但是一些基础的东西还是掌握不好,所以我现在依然会一遍遍的复习h5和css3,这就是自学的坏处,不知道的东西不知道怎么去学,没有哪个视频或者书讲得很全的,几乎都有知识点没讲,我甚至看见过有几本书有些知识点讲错了(也有可能是我错了),好吧,言归正传,这个方法是定位,一张图片或者div要在一个已知的容器里左右对齐,上下对齐,或者说是居中吧,
第一种方法若使用上一层盒子为参照物,那么应该修改上一层的盒子为当前盒子的高度,然后通过原始高度减去当前高度,则为上一层盒子的上下padding距离
第二种方法若使用当前盒子为参照物,那么则应该修改当前盒子的margin等于上一层盒子减去当前盒子的高度为当前盒子的上下margin距离,上一层盒子的高度不变
这是上下的,左右的也一个道理,已知上一层的容器的宽度以及要操作的元素的宽度,修改上一层的宽度减去当前盒子的宽度,剩下的宽度除以2,这个数值就是当前要操作的盒子的单面margin值,不过这些方法都不利于维护,想要居中两种一起写就ok

div在上一层容器居中的方法的更多相关文章

  1. 让图片在div 中居中的方法

    方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...

  2. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  3. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  4. 纯css使div垂直居中,div垂直,div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  5. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  6. div在浏览器窗口中居中

    让div相对于浏览器窗口居中. 方案一:纯粹使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  8. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

  9. Docker技术入门与实战 第二版-学习笔记-8-网络功能network-1-单个host上的容器网络

    Docker 中的网络功能介绍 Docker 允许通过外部访问容器或容器互联的方式来提供网络服务 1) 外部访问容器 容器中可以运行一些网络应用,要让外部也可以访问这些应用,可以通过 -p或 -P参数 ...

随机推荐

  1. Antd-react-mobile项目学习中遇到的问题记录(持续更新)

    1.Error:The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customi ...

  2. 行人重识别(ReID) ——数据集描述 Market-1501

    数据集简介 Market-1501 数据集在清华大学校园中采集,夏天拍摄,在 2015 年构建并公开.它包括由6个摄像头(其中5个高清摄像头和1个低清摄像头)拍摄到的 1501 个行人.32668 个 ...

  3. 使用JSONP,jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  4. 【错误】mysql 出现 "1067 - Invalid default value for 'UPDATE_TIME' " 错误提示的解决办法

    今天工作中遇到修改表结构的时候出现错误 Invalid default value for 'UPDATE_TIME 问题原因是因为db 表中update_time的默认时间写成了 '0000-00- ...

  5. JAVA 关于File的使用

    File中常用方法 创建 createNewFile() 在指定位置创建一个空文件,成功就返回true,如果已存在就不创建然后返回false mkdir() 在指定位置创建目录,这只会创建最后一级目录 ...

  6. 查找目录下指定类型的所有文件(maven 打包提取脚本)

    1 首先想到的是递归遍历目录 筛选出符合条件的文件 dir命令递归遍历目录 /b控制显示格式 /s递归  /ad 只显示目录 dir /b/s .\* 判断文件类型 操作数得用`` rem 取出文件扩 ...

  7. thinkphp获取目录的方法

    1.获取根目录 http://localhost/ 下面两种方法效果一样 $_SERVER['REQUEST_SCHEME']."://".$_SERVER['HTTP_HOST' ...

  8. LOJ 2840「JOISC 2018 Day 4」糖

    有趣的脑子题(可惜我没有脑子 好像也可以称为模拟费用流(? 我们考虑用链表维护这个东西 再把贡献扔到堆里贪心就好了 大概就是类似于有反悔机制的贪心?我们相当于把选中的一个打上一个-v的tag然后如果选 ...

  9. Python---编辑器安装和print函数

    Python---编辑器安装和print函数 -------------------------------------------------------- 一.Python是什么? Python是 ...

  10. 036:DTL常用过滤器(5)

    slice过滤器: 类似于 Python 中的切片操作.示例代码如下: {{ some_list|slice:"2:" }} 以上代码将会给 some_list 从 2 开始做切片 ...